TypeScript Cheat Sheet

console.log("Hello, World!");

let name: string = "John";
let age: number = 25;

let name = "John";  // inferred as string
let count = 0;      // inferred as number

tsc file.ts        // Compile to JS
tsc --watch        // Watch mode

// tsconfig.json
{ "compilerOptions": { "strict": true } }

let name: string = "John";

let age: number = 25;

let isActive: boolean = true;

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

let tuple: [string, number] = ["age", 25];

let data: any = "anything";

let value: unknown = getValue();

function log(msg: string): void {}
function fail(): never { throw new Error(); }

const len = (value as string).length;
const len = (<string>value).length;

const el = document.getElementById("id")!;
el.textContent = "Hello";

obj?.property
obj?.method?.()
arr?.[index]

const name = value ?? "default";
let x = 0;
x ??= 10;  // x stays 0

const config = {
    port: 3000,
} satisfies Config;

type Keys = keyof User;  // "name" | "age"
type UserType = typeof user;

for (let i = 0; i < 5; i++) {
    console.log(i);
}

for (const item of array) {
    console.log(item);
}

for (const key in object) {
    console.log(key, object[key]);
}

const nums: number[] = [1, 2, 3];
nums.forEach((n: number) => console.log(n));

while (count < 10) {
    count++;
}

const doubled: number[] = nums.map(
    (n: number): number => n * 2
);

const sum: number = nums.reduce(
    (acc: number, n: number) => acc + n, 0
);

interface User {
    name: string;
    age: number;
    email?: string;  // optional
}

type ID = string | number;

type Status = "pending" | "approved" | "rejected";

type Employee = Person & { employeeId: number };

interface Admin extends User {
    permissions: string[];
}

function greet(name: string): string {
    return `Hello, ${name}!`;
}

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

function greet(name?: string): string {
    return `Hello, ${name ?? "World"}!`;
}

type Callback = (data: string) => void;

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

interface Box<T> {
    value: T;
}

function getLength<T extends { length: number }>(arg: T): number {
    return arg.length;
}

function pair<K, V>(key: K, value: V): [K, V] {
    return [key, value];
}

type PartialUser = Partial<User>;
// All properties optional
// { name?: string; age?: number; }

type RequiredUser = Required<User>;
// All properties required

type NameOnly = Pick<User, "name" | "age">;
// Only selected properties

type NoEmail = Omit<User, "email">;
// All except listed properties

type UserMap = Record<string, User>;
type StatusMap = Record<"pending" | "done", number>;

type ReadonlyUser = Readonly<User>;
// All properties readonly

type T = Exclude<"a" | "b" | "c", "a">;
// "b" | "c"

type T = Extract<"a" | "b" | "c", "a" | "f">;
// "a"

type T = NonNullable<string | null | undefined>;
// string

function getUser() { return { name: "John" }; }
type User = ReturnType<typeof getUser>;

function greet(name: string, age: number) {}
type P = Parameters<typeof greet>;
// [string, number]

type A = Awaited<Promise<string>>;
// string

class Dog {
    constructor(public name: string) {}

    bark(): string {
        return `${this.name} says woof!`;
    }
}

class User {
    private password: string;
    public name: string;
}

abstract class Animal {
    abstract speak(): void;
}

function isString(x: unknown): x is string {
    return typeof x === "string";
}

if (isString(value)) {
    value.toUpperCase();  // TS knows it's string
}

type Result =
    | { status: "success"; data: string }
    | { status: "error"; error: Error };

function handle(r: Result) {
    if (r.status === "success") {
        console.log(r.data);  // TS knows data exists
    }
}

const colors = ["red", "green"] as const;
// readonly ["red", "green"]

const config = {
    port: 3000,
    host: "localhost"
} as const;

type Event = "click" | "focus";
type Handler = `on${Capitalize<Event>}`;
// "onClick" | "onFocus"

type Getters<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<User>;
// { getName: () => string; getAge: () => number; }

type IsString<T> = T extends string ? true : false;

type A = IsString<"hello">;  // true
type B = IsString<42>;       // false

type UnwrapPromise<T> =
    T extends Promise<infer U> ? U : T;

type A = UnwrapPromise<Promise<string>>;  // string
type B = UnwrapPromise<number>;           // number