Comprehensive TypeScript Cheatsheet

A set of TypeScript related notes used for quick reference. The cheatsheet contains references to types and many other TypeScript related subjects.

Contents

    1. Basic Assign Types:            String, Number, Boolean, Undefined, Null.
    2. Any:                                         Any.
    3. Void Function Type:            Void.
    3. Union:                                     Union.
    4. Interface:                               Interface.
    5. Array:                                      Array.
    6. Function Type:                     Function Type.
    7. Type Assertion:                    Type Assertion.
    8. Alias:                                       Alias.
    9. Enum:                                     Enum.
    10. Class Modifiers:                 Class Modifiers.
    11. Generic Type:                      Generic Type.

String

const str_double_quote: string = "Hello";
const str_single_quote: string = "World!";

Number

const num_int: number = 1;
const num_float: number = 1.0;

Boolean

const yes: boolean = true;
const not: boolean = false;

Undefined

const un: undefined = undefined;

Null

const nul: null = null;

Any

let num: any = 1;
num = true;
num = "3";

let str;
str = 1;
str = "3";

Void

const fun = function (): void {};

const fun_arrow = (): void => {};

Union

let diff_type: string | number = "hello";
diff_type = 10;

Interface

interface Istate {
  name: string;
  age: number;
}

let obj: Istate;
obj = {
  name: "Bob",
  age: 23,
};

Mark attribute with keyword readonly

interface Istate {
  name: string;
  readonly age: number;
}

Define attribute of interface with ? mark

interface Istate {
  name: string;
  age?: number;
}

let obj: Istate;
obj = {
  name: "Bob",
};

Define unknown attribute for future use

interface Istate {
  name: string;
  age?: number;
  [propName: string]: any;
}

let obj: Istate;
obj = {
  name: "Bob",
  age: 23,
  sex: "man",
  isMarry: true,
};

Array

There are three way to define an array. First one is type + []

let arr_one: number[] = [1, 2, 3];
let arr_two: string[] = ["1", "2", "3"];
let arr_three: any[] = [1, "2", true];

Second one is Array <elemType>

let arr_four: Array<number> = [1, 2, 3];
let arr_five: Array<string> = ["1", "2", "3"];
let arr_six: Array<any> = [1, "2", true];

Third using interface

interface IarrOne {
  [index: number]: number;
}

let arr_seven: IarrOne = [1, 2, 3];

Array can also contain pre-define interface

interface Istate {
  username: string;
  age: number;
}
interface IarrTwo {
  [index: number]: Istate;
}

let arr_eight: IarrTwo = [
  { username: "Alice", age: 20 },
  { username: "Bob", age: 18 },
];

Function Type

Function declarations

function funcTypeOne(name: string, age: number): number {
  return age;
}
const age_num: number = funcTypeOne("Alice", 23);

function funcTypeTwo(name: string, age: number, sex?: string): number {
  return age;
}
const age_num_two: number = funcTypeTwo("Alice", 23);
const age_num_three: number = funcTypeTwo("Alice", 23, "man");

function funcTypeThree(name: string = "Bob", age: number = 18): number {
  return age;
}
const age_num_four: number = funcTypeThree();
const age_num_five: number = funcTypeThree("Alice", 23);

Function expression

const funcTypeFour = function (name: string, age: number): number {
  return age;
};

const funcTypeFive: (name: string, age: number) => number = function (
  name: string,
  age: number
): number {
  return age;
};

interface IfunType {
  (name: string, age: number): number;
}

const funcTypeSix: IfunType = function (name: string, age: number): number {
  return age;
};

Union function type

function getValue(value: number): number;
function getValue(value: string): string;
function getValue(value: number | string): number | string {
  return value;
}
let num: number = getValue(1);
let str: string = getValue("1");```

Type Assertion

function getAssertOne(name: string | number) {
  return (<string>name).length;
}

function getAssertTwo(name: string | number) {
  return (name as string).length;
}

Alias

type strType = string | number;
let str: strType = "10";
str = 10;

interface ItypeOne {
  name: string;
}

interface ItypeTwo {
  age: number;
}

type obj_type = ItypeOne | ItypeTwo;
let obj: obj_type = { name: "Alice" };
obj = { age: 23 };
obj = { name: "Alice", age: 23 };

Restricted parameter

type sex = "man" | "woman";
function getSex(s: sex): string {
  return s;
}
getSex("man");

Enum

enum Days {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat,
}

Class Modifiers

Default modifier is public
Sex attribut of Person class can only access by person object within Person class

class Person {
  name = "Alice";
  private age: 18;
  protected sex: "man";
  say() {
    console.log("Hi");
    console.log(this.sex);
  }
}

const person = new Person();
person.name;
person.say();

class Child extends Person {
  callParent() {
    super.say();
    super.name;
    super.sex;
  }
  static test() {
    console.log("test");
  }
}

const child = new Child();
child.name;
child.say();
child.callParent();
// call test method without create the child object
Child.test();

Generic Type

function createArray<T>(length: number, value: T): Array<T> {
  let arr = [];
  for (let i = 0; i < length; i++) {
    arr[i] = value;
  }
  return arr;
}

let str_arr: string[] = createArray<string>(3, "1");
let num_arr: number[] = createArray(3, 1);

interface IcreateArry {
  <T>(name: string, value: T): Array<T>;
}

let func: IcreateArry;
func = function <T>(name: string, value: T): Array<T> {
  return [];
};

let str_arr_i: string[] = func("Alice", "1");
let num_arr_i: number[] = func("Bob", 1);