Javascript/Typescript Cheatsheet

Table of contents
  1. Installation
  2. Typescript compiler
  3. Basic typing
    1. Primitive types
    2. Array and tuple types
    3. Union and enum types
    4. Object types and type alias
    5. Function types
    6. Literal types
  4. Type assertions
  5. Interface
    1. Object interface
    2. Function interface
  6. Undefined values
    1. Non-null assertions (!)
  7. Index signature
  8. Generics
  9. Classes
  10. Readonly arrays and tuples
  11. Symbol type
  12. Computed property names
  13. Template strings

Installation

I personally prefer to install typescript compiler per project directory.

npm i typescript --save-dev  # or -D
# OR
yarn add typescript --dev

Typescript compiler

Basic usage:

tsc <filename>  # One-time compile
tsc --watch <filename>  # Livereloading

When specifiying the filename for tsc you may include or leave out the .ts extension.

tsc --init

init creates the tsconfig.json file. With a tsconfig.json file, you can leave out the filename when runnig tsc.

Basic typing

Primitive types

Primitives are all lowercase.

let a: number = 1;
let b: string = "a";
let c: boolean = true;  // Lowercase
let d: any = { x: 0 };

Unless declared without initialization, these are usually inferred.

Array and tuple types

Simply add brackets:

let a: number[] = [1, 2, 3, 4];  // You can also use Array<number>
let b: [number, string] = [1, "a"];
let c: [number, string][] = [[1, "a"], [2, "b"]];

Union and enum types

Union:

let id: string | number;

Enum:

enum MyEnum {
  Up = 1,  // Default is 0
  Down,
  Left,
  Right
}

The first constant in an enum always has the value of 0. If you set it to 1, the rest will have an ascending value of 2, 3, and 4. You can also give string values to enums.

Object types and type alias

Object typing without the type alias can be messy:

const obj: {
  a: number,
  b?: string,
  readonly c: boolean,
} = {
  a: 1,
  c: true
}

Using type:

type MyObj = {
  a: number,
  b?: string,
  readonly c: boolean
};
const obj: MyObj = {
  a: 1,
  c: true
}

The ? means it is an optional property or an optional parameter if used in functions.

Function types

function f(x: number, y: string): void {
  ...
}

Literal types

You can use this like a constant or quicky enum:

function f(x: number, y: "a" | "b"): -1 | 0 | 1 {
  ...
}

To change an object to a literal type use as const:

const x = { a: "hello", b: "world" } as const

Type assertions

To give any variables explicit types:

let a: any = 1;
let b = a as number
// OR
let c = <number>a

Interface

Object interface

interface MyInterface {
  a: number,
  b?: string
}

Function interface

interface FuncInterface {
  (x: number, y: string): void
}

While it is similar to type aliasing, there are some differences:

  • You cannot use union types with an interface.
type MyType = string | number;  // OK
// interface MyType2 = string | number;  // NO
  • You can add new fields to existing interfaces but not in type aliasing.
interface MyInterface{
  a: number
}
interface MyInterface{
  b: string
}

Undefined values

Use null or undefined.

function f(x: number | null): void{
  ...
}

Non-null assertions (!)

someObj!.runFunction();

Index signature

To be added

Generics

To be added

Classes

To be added

Readonly arrays and tuples

To be added

Symbol type

To be added

Computed property names

To be added

Template strings

let a = `Put ${variableName} here.`