Style Guide

Names

1. Use PascalCase for type names and enum values.
2. Use camelCase for function names, property names and local variables.
3. Use UPPER_CASE for global constants.
4. Use "_" as a prefix for private properties and "I" as a prefix for interface names.
5. Use whole words in names when possible.

Types

1. Do not export types/functions unless you need to share them across multiple components.
2. Within a file, type definitions should come first.

Flags

1. More than 2 Boolean properties on a type should be turned into bit flags (see example below).

Comments

1. Use JSDoc-style comments for functions, interfaces, enums, and classes.

Style

1. Use arrow functions over anonymous function expressions.
2. Only surround arrow function parameters when necessary.
   For example, (x) => x + x is wrong but the following are correct:
3. x => x + x
4. (x,y) => x + y
5. <T>(x: T, y: T) => x === y
6. Always surround loop and conditional bodies with curly braces.
7. Open curly braces always go on the same line as whatever necessitates them.
8. Parenthesized constructs should have no surrounding whitespace.
   A single space follows commas, colons, and semicolons in those constructs. For example:
9. for (var i = 0, n = str.length; i < 10; i++) { }
10. if (x < 10) { }
11. function f(x: number, y: string): void { }
12. Use a single declaration per variable statement
    (i.e. use var x = 1; var y = 2; over var x = 1, y = 2;).
13. else goes on the same line as the closing curly brace.
14. Use two (2) spaces for tabs.
15. The export keyword should be on its own line.
16. Function declarations are allowed to wrap lines, but prefer 80 characters for other lines.

Classes

1. Avoid public attributes - use setters/getters.
2. Use _ for private/protected variable names.
3. Initialize all private variables to a sentinel value or null.
4. Order should be:

• Static members
• Static methods
• Public methods
• Protected methods
• Private methods
• Protected members
• Private members

Examples

• Interface declaration:

/**
 * The base message object which can be sent to a message handler.
 */
export
interface IMessage {
  /**
   * The type of the message.
   */
  type: string;
}

• If-Else block:

if (parent) {
  this._parent = null;
} else if (this.isAttached) {
  this.detach(); 
}

• Bit flags:

export
enum WidgetFlag {
  /**
   * The widget is attached to the DOM.
   */
  IsAttached = 0x1,
}

export
class Widget {
  /**
   * Test whether the given widget flag is set.
   */
  testFlag(flag: WidgetFlag): boolean {
    return (this._wflags & flag) !== 0;
  }

  /**
   * Set the given widget flag.
   */
  setFlag(flag: WidgetFlag): void {
    this._wflags |= flag;
  }

  /**
   * Clear the given widget flag.
   */
  clearFlag(flag: WidgetFlag): void {
    this._wflags &= ~flag;
  }

  private _wflags = 0;
}