TypeScript Cheatsheet

TypeScript Cheatsheet

January 11, 2020
Cheatsheets
★ Star me on GitHub

Play TypeScript Online. Created by Cyanhall.


Compile to Javascript:

tsc --outFile sample.js Test.ts

Basic

let name: string = 'name';
let isDone: boolean = false;
let count: number = 10;
let sentence: string = `Hello, ${ name }.`
let notSure: any = 1;

let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

let tupleX: [string, number];
x = ['hello', 10]

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

let [first, ...rest] = [1, 2, 3, 4];
// first: 1, rest: [2, 3, 4 ]

// type assert
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;

Function

const params = (value: string) => {
  console.log(value);
}

const paramOr = (value: string | null) => {
  console.log(value);
}
paramOr('1'); // OK
paramOr(null); // OK
paramOr(1); // Error

const paramArray = ([first, second]: [string, number]) => {
  console.log(first);
  console.log(second);
}

const returnValue = (): String =>  {
  return 'return a stirng';
}

Interface

interface Config {
  color?: string;
  width?: number;
  readonly y?: number;
  [propName: string]: any;
}
const funcName = (config: Config) => {
  console.log(config.test);
}
funcName({test: 'test prop'}); // test prop

Class

class Example {
  name: string; // default public
  private priaveName: string;
  protected protectedName: string;
  readonly readonlyName: string;
  private _fullName: string;
  static baseRoute = '/basePath';
  constructor(name: string) {
    this.name = name;
    this.priaveName = name;
    this.protectedName = name;
    this.readonlyName = name;
    this._fullName = name;
  }
  hello() {
    return `Hello, ${this.name}`;
  }
  get fullName(): string {
    return this._fullName;
  }
  set fullName(newName: string) {
    // do some check
    // ...
    this._fullName = newName;
  }
}
let test = new Example("world");
console.log(test.hello()); // Hello, world
test.priaveName; // Error

class NewExample extends Example {
  hi() {
    return `Hi, ${super.hello()}`;
  }
  getProtectedName() {
    return this.protectedName
  }
}

let newTest = new NewExample("new world");
console.log(newTest.hi()); // Hi, Hello, new world

newTest.protectedName; // Error
newTest.getProtectedName(); // OK


// Abstract Class
abstract class AbstractExample {
  abstract hi(): void;
  say(): void {
    console.log('say something');
  }
}
class ActualExample extends AbstractExample {
  hi() {
    return 'hi'
  }
}

Namespace

namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}
Validation.StringValidator;

Generic

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

Declare

File ends with .d.ts

declare var testNumber: number;
declare function hi(greeting: string): void;
declare namespace myNamespace {
  function hello(s: string): string;
  let count: number;
}