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.

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 indentation.
6. The export keyword should be on its own line.
7. Function and class signatures may exceed 80 chars; use 80 chars for all other lines.

Classes

1. Avoid public properties - use setters/getters.
2. Do not use the public keyword for public members - it is implied by default.
3. Initialize all private properties to a sentinel value or null, unless they will be initialized in the constructor. If a basic type is used, do not add a type specifier (e.g. private _someValue = 0;).
4. Ordering of members within a class should be:

• static
• public
• protected
• private

5. Start with getters/setters in each scope, then methods. Protected and 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;
}