TypeScript Cheat Sheet

By on December 31, 2013 3:15 pm

This cheat sheet is an adjunct to our Definitive Guide to TypeScript and our ES6 and TypeScript for the enterprise developer workshops.

Last updated for: TypeScript 2.5

Usage
npm install typescript
tsc
Primitive types
Any type (explicitly untyped) any
void type (undefined or null, use for function returns only) void
Undefined type undefined
Null type null
never type never
readonly readonly
String (including ES6 multi-line string templates) string
Number number
Boolean boolean
object (may be an Object or non-primitive) object
Named types (interface, class, enum)
Interface interface Child extends Parent, SomeClass {
  property: Type;
  optionalProp?: Type;
  optionalMethod?(arg1: Type): ReturnType;
}
Class class Child extends Parent implements Child, OtherChild {
  property: Type;
  defaultProperty: Type = 'default value';
  private _privateProperty: Type;
  static staticProperty: Type;
  constructor(arg1: Type) {
    super(arg1);
  }
  private _privateMethod(): Type {}
  methodProperty: (arg1: Type) => ReturnType;
  overloadedMethod(arg1: Type): ReturnType;
  overloadedMethod(arg1: OtherType): ReturnType;
  overloadedMethod(arg1: CommonT): CommonReturnT {}
  static staticMethod(): ReturnType {}
  subclassedMethod(arg1: Type): ReturnType {
    super.subclassedMethod(arg1);
  }
}
Enum enum Options {
  FIRST,
  EXPLICIT = 1,
  BOOLEAN = Options.FIRST | Options.EXPLICIT
}
enum Colors {
  Red = "#FF0000",
  Green = "#00FF00",
  Blue = "#0000FF"
}
Object type literals
Object with implicit Any properties { foo; bar; }
Object with optional property { required: Type; optional?: Type; }
Hash map { [key: string]: Type; }
Union and intersection types
Union type let myUnionVariable: number | string;
Intersection type let myIntersectionType: Foo & Bar;
Arrays and tuples
Array of strings string[] or
Array<string>
Array of functions that return strings { (): string; }[] or
Array<() => string>
Tuples let myTuple: [ string, number ];
myTuple = [ 'test', 42 ];
Functions
Function { (arg1: Type, argN: Type): Type; } or
(arg1: Type, argN: Type) => Type;
Constructor { new (): ConstructedType; } or
new () => ConstructedType;
Function type with optional param (arg1: Type, optional?: Type) => ReturnType
Function type with rest param (arg1: Type, ...allOtherArgs: Type[]) => ReturnType
Function type with static property { (): Type; staticProp: Type; }
Default argument function fn(arg1: Type = 'default'): ReturnType {}
Arrow function (arg1: Type): ReturnType => {} or
(arg1: Type): ReturnType => Expression
this typing function fn(this: Foo)
Generics
Function using type parameters <T>(items: T[], callback: (item: T) => T): T[]
Interface with multiple types interface Pair<T1, T2> {
  first: T1;
  second: T2;
}
Constrained type parameter <T extends ConstrainedType>(): T
Default type parameter <T = ConstrainedType>(): T
Constrained and default type parameter <T extends ConstrainedType = ConstrainedType>(): T
Partial and mapped types
Partial type Partial<{ x: number; y: number; z: number; }>
is equivalent to
{ x?: number; y?: number; z?: number; }
Readonly type Readonly<{ x: number; y: number; z: number; }>
is equivalent to
{
  readonly x: number;
  readonly y: number;
  readonly z: number;
}
Pick type Pick<{ x: number; y: number; z: number; }, 'x' | 'y'>
is equivalent to
{ x: number; y: number; }
Record type Record<'x' | 'y' | 'z', number>
is equivalent to
{ x: number; y: number; z: number; }
Other
Type of a variable typeof varName

Is this cheat sheet missing anything? Let us know in the comments.

Comments

  • Pingback: The Definitive TypeScript Guide | Blog | SitePen()

  • xperiments

    Hi, Thanks 4 this great sheet…

    Can you give-me more info about the:

    Function type with static property{ ():Type; staticProp:Type; }

    Definition?

    Never see this… so I ask ;-)

  • That definition would be used for something like this:

    function foo():string {
    return 'hello';
    }
    foo.bar = function ():number {
    return 123;
    };
    var fooType:{ ():string; bar:() => number; } = foo;

    It is a function (foo) with a defined static property (foo.bar).

  • ByronSommardahl

    Hi guys! This is a great cheat sheet. My team was also working on a cheat sheet for TS and we found this. Ours was going to be open source in github so that it would be easy for community contributions. It can be found here. https://github.com/AcklenAvenue/TypeScriptCheatSheet For now, it is very similar to your cheat sheet, but over time, it will be brought up to date and improved.