TypeScript Cheat Sheet

TypeScript is a statically typed superset of JavaScript that adds a powerful type system and tooling. This TypeScript cheatsheet is an example-driven reference covering core syntax, types, interfaces, generics, classes, and asynchronous programming.

Running TypeScript

tsc app.ts
node app.js

ts-node app.ts

Variables & Type Annotations

let a: number = 10;
const b: string = "text";

let c = 20; // inferred

Basic Types

number
string
boolean
null
undefined
symbol
bigint

let ok: boolean = true;

Arrays

let nums: number[] = [1, 2, 3];
let strs: Array<string> = ["a", "b"];

Tuples

let t: [number, string] = [1, "a"];

Enums

enum Status {
  OK,
  ERROR,
  LOADING,
}

let s: Status = Status.OK;

Any / Unknown

let a: any = 10;
let u: unknown = "text";

if (typeof u === "string") {
  u.length;
}

Void / Never

function log(msg: string): void {
  console.log(msg);
}

function fail(): never {
  throw new Error("fail");
}

Union Types

let id: number | string;

function print(v: number | string) {
  if (typeof v === "string") {
    v.toUpperCase();
  }
}

Intersection Types

type A = { a: number };
type B = { b: number };

type C = A & B;

Literal Types

let dir: "left" | "right";

Type Aliases

type User = {
  name: string;
  age: number;
};

Interfaces

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

interface Admin extends User {
  role: string;
}

Optional & Readonly

interface Config {
  readonly id: string;
  timeout?: number;
}

Functions

function add(a: number, b: number): number {
  return a + b;
}

const sum = (a: number, b: number): number => a + b;

Function Types

type Op = (a: number, b: number) => number;

Default & Rest Parameters

function multiply(a: number, b: number = 2): number {
  return a * b;
}

function total(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

Type Assertions

const v: unknown = "text";
const len = (v as string).length;

const len2 = (<string>v).length;

Objects

const user: User = {
  name: "A",
  age: 20,
};

Classes

class Counter {
  private value: number = 0;

  increment(): void {
    this.value++;
  }

  get(): number {
    return this.value;
  }
}

Inheritance

class Animal {
  speak(): void {}
}

class Dog extends Animal {}

Access Modifiers

public
private
protected
readonly

Abstract Classes

abstract class Shape {
  abstract area(): number;
}

Implements

interface Logger {
  log(msg: string): void;
}

class ConsoleLogger implements Logger {
  log(msg: string): void {
    console.log(msg);
  }
}

Generics

function identity<T>(value: T): T {
  return value;
}

const v = identity<number>(10);

Generic Constraints

function lengthOf<T extends { length: number }>(v: T): number {
  return v.length;
}

Utility Types

Partial<User>
Required<User>
Readonly<User>
Pick<User, "name">
Omit<User, "age">

keyof / typeof

type Keys = keyof User;

const obj = { a: 1, b: 2 };
type Obj = typeof obj;

Index Signatures

interface Dict {
  [key: string]: number;
}

Discriminated Unions

type Result =
  | { type: "ok"; value: number }
  | { type: "error"; message: string };

function handle(r: Result) {
  switch (r.type) {
    case "ok":
      return r.value;
    case "error":
      return r.message;
  }
}

Modules

export function add(a: number, b: number): number {
  return a + b;
}

import { add } from "./math";

Namespaces

namespace MathUtil {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

Async / Await

async function fetchValue(): Promise<number> {
  return 42;
}

const v = await fetchValue();

Promises

const p: Promise<number> = Promise.resolve(10);

Error Handling

try {
  throw new Error("fail");
} catch (e) {
}

DOM Types

const el = document.querySelector("#id") as HTMLElement;