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. Always surround loop and conditional bodies with curly braces.
3. Open curly braces always go on the same line as whatever necessitates them.
4. else goes on the same line as the closing curly brace.
5. Use two (2) spaces for tabs.
6. The export keyword should be on its own line.
7. Function and class signatures can exceed 80 chars; use 80 chars for all other lines.

Classes

1. Avoid public attributes - use setters/getters.
2. Do not use the public keyword for public methods - it is implied.
3. Initialize all private variables to a sentinel value or null. If a basic type is used, do not add a type specifier (e.g. private _myCoolInt = 0;).
4. Scope order should be:

• Static
• Public
• Protected
• Private

5. Start with getters/setters in each scope, then methods. Private properties go last.

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;
}