TypeScript
Cheatsheet

let title: string = "TypeScript cheatsheet";
let modules: number = 20;
let published: boolean = true;
let big: bigint = 9007199254740993n;
let id: symbol = Symbol("id");

const tags: string[] = ["types", "generics"];
const scores: Array<number> = [90, 85];

// A tuple fixes the length and the type at each position
const point: [x: number, y: number] = [10, 20];
const entry: [string, number, boolean?] = ["age", 30];

console.log(typeof title, typeof modules, typeof big);
console.log(tags.length, scores[1]);
console.log(point, entry.length);

let loose: any = "hello";
loose.toFixed(2);              // compiles, then crashes at runtime

let safe: unknown = "hello";
safe.toUpperCase();            // rejected: narrow it first
if (typeof safe === "string") safe.toUpperCase(); // fine

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

let count = 10;              // number
const mode = "dark";         // "dark"
let size = "md" as "sm" | "md" | "lg";

const config = { retries: 3, url: "/api" };          // { retries: number; url: string }
const frozen = { retries: 3, url: "/api" } as const; // { readonly retries: 3; readonly url: "/api" }

const methods = ["GET", "POST"] as const;
type Method = (typeof methods)[number];              // "GET" | "POST"
const m: Method = "POST";

console.log(count, mode, size);
console.log(config, frozen.retries);
console.log(methods, m);

type Align = "left" | "center" | "right";

let align: Align = "left";
align = "middle";

type Id = string | number;

function format(id: Id): string {
  if (typeof id === "number") return id.toFixed(0).padStart(5, "0");
  return id.toUpperCase();
}

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;          // discriminated by `kind`

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.round(Math.PI * s.radius ** 2);
    case "square": return s.side ** 2;
    default: {
      const unreachable: never = s;    // breaks the build if a case is missing
      return unreachable;
    }
  }
}

console.log(format(42), format("ab-7"));
console.log(area({ kind: "circle", radius: 2 }), area({ kind: "square", side: 3 }));

type Timestamps = { createdAt: Date };
type User = { name: string };
type SavedUser = User & Timestamps;    // has both sets of fields

const u: SavedUser = { name: "Shree", createdAt: new Date(0) };

type Fish = { swim(): string };
type Bird = { fly(): string };
function move(pet: Fish | Bird) {
  return "swim" in pet ? pet.swim() : pet.fly();
}

function describe(e: Error | string) {
  return e instanceof Error ? `Error: ${e.message}` : e;
}

console.log(u.name, u.createdAt.getTime());
console.log(move({ fly: () => "flap" }));
console.log(describe(new Error("boom")), describe("plain"));

interface User {
  readonly id: number;
  name: string;
  email?: string;                   // optional
  [meta: `x-${string}`]: unknown;   // any key that starts with "x-"
}

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

// Declaration merging: a second block adds to the same interface
interface User {
  active: boolean;
}

type Point = { x: number; y: number };
type Point3D = Point & { z: number };
type Status = "idle" | "loading" | "done";   // only a type alias can name a union

const admin: Admin = { id: 1, name: "Shree", active: true, permissions: ["deploy"], "x-team": "backend" };
const p: Point3D = { x: 1, y: 2, z: 3 };
const s: Status = "done";

console.log(admin.name, admin.permissions, admin["x-team"]);
console.log(p, s);

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "Shree" };
user.name = "Shri";   // fine
user.id = 2;          // rejected

// Parameter types, a default and an optional parameter, a typed return
function greet(name: string, greeting = "Hello", punct?: string): string {
  return `${greeting}, ${name}${punct ?? "!"}`;
}

// Rest parameters, and a function type you can reuse
const sum = (...nums: number[]): number => nums.reduce((a, b) => a + b, 0);
type BinaryOp = (a: number, b: number) => number;
const multiply: BinaryOp = (a, b) => a * b;

// Overloads: two call signatures, one implementation
function parse(input: string): number;
function parse(input: number): string;
function parse(input: string | number): string | number {
  return typeof input === "string" ? Number(input) : String(input);
}

// A typed `this`
interface Counter { count: number; inc(this: Counter): number }
const counter: Counter = { count: 0, inc() { return ++this.count; } };

console.log(greet("Shree"), greet("Ana", "Hi", "?"));
console.log(sum(1, 2, 3), multiply(4, 5));
console.log(parse("42") + 1, parse(7).length);
counter.inc();
console.log(counter.inc());

enum Direction { Up, Down, Left, Right }              // 0, 1, 2, 3
enum Status { Active = "ACTIVE", Banned = "BANNED" }   // string enum
enum Flag { None = 0, Read = 1 << 0, Write = 1 << 1, All = Read | Write }

console.log(Direction.Up, Direction[2]);   // reverse mapping, numeric enums only
console.log(Status.Active, Flag.All);
console.log(Direction);
console.log(Status);

enum Role { Admin = "admin", Editor = "editor", Viewer = "viewer" }

type RoleKey = keyof typeof Role;      // "Admin" | "Editor" | "Viewer"
type RoleValue = `${Role}`;            // "admin" | "editor" | "viewer"

// Dynamic key access: the key is checked against the enum's names
function fromKey(key: RoleKey): Role {
  return Role[key];
}

// Reverse lookup for a string enum: value back to its name
function keyOf(value: Role): RoleKey {
  return (Object.keys(Role) as RoleKey[]).find((k) => Role[k] === value)!;
}

// Runtime guard: is an incoming string a valid member?
const isRole = (v: string): v is Role =>
  (Object.values(Role) as string[]).includes(v);

// The enum as keys: leave one out and the compiler complains
const limits: Record<Role, number> = {
  [Role.Admin]: 100,
  [Role.Editor]: 20,
  [Role.Viewer]: 5,
};

const raw: RoleValue = "editor";
console.log(fromKey("Editor"), keyOf(Role.Viewer), raw);
console.log(Object.keys(Role), Object.values(Role));
console.log(isRole("admin"), isRole("owner"));
console.log(limits);

enum Level { Low = 1, Mid, High }      // Mid = 2, High = 3

// Numeric enums hold reverse keys too, so filter them out
const names = Object.keys(Level).filter((k) => isNaN(Number(k)));
const values = Object.values(Level).filter((v): v is Level => typeof v === "number");

for (const name of names) {
  console.log(name, Level[name as keyof typeof Level]);
}
console.log(values);

const HttpStatus = {
  Ok: 200,
  NotFound: 404,
  ServerError: 500,
} as const;

type HttpStatusKey = keyof typeof HttpStatus;              // "Ok" | "NotFound" | "ServerError"
type HttpStatusCode = (typeof HttpStatus)[HttpStatusKey];  // 200 | 404 | 500

// Reverse map: code back to its name, typed both ways
const statusName = Object.fromEntries(
  Object.entries(HttpStatus).map(([k, v]) => [v, k]),
) as { [K in HttpStatusKey as (typeof HttpStatus)[K]]: K };

// Object.keys and Object.entries return string by design; these keep the keys
const keys = <T extends object>(o: T) => Object.keys(o) as (keyof T)[];
const entries = <T extends object>(o: T) =>
  Object.entries(o) as { [K in keyof T]: [K, T[K]] }[keyof T][];

function respond(code: HttpStatusCode) {
  return `${code} ${statusName[code]}`;
}

console.log(respond(HttpStatus.NotFound));
console.log(keys(HttpStatus));
console.log(entries(HttpStatus));

const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number];      // "admin" | "editor" | "viewer"

// An object built from the list, typed with every key
const labels = Object.fromEntries(ROLES.map((r) => [r, r.toUpperCase()])) as Record<Role, string>;

// Assign to a key held in a variable
const counts: Partial<Record<Role, number>> = {};
function bump(role: Role) {
  counts[role] = (counts[role] ?? 0) + 1;
}
bump("admin"); bump("admin"); bump("viewer");

// Read a property by a key held in a variable
function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
const user = { name: "Shree", level: 3 };
const field: keyof typeof user = "level";

console.log(labels);
console.log(counts);
console.log(pluck(user, field), pluck(user, "name"));

const theme = { light: "#fff", dark: "#111" };

function pick(name: string) {
  return theme[name];          // rejected: any string could be passed
}

function pickSafe(name: keyof typeof theme) {
  return theme[name];          // fine: only "light" or "dark"
}

interface Shape { area(): number }

abstract class Base implements Shape {
  static count = 0;
  constructor(protected readonly name: string) { Base.count++; }
  abstract area(): number;
  describe(): string { return `${this.name}: ${this.area()}`; }
}

class Rect extends Base {
  #secret = "private at runtime";   // JavaScript private field
  private cache?: number;           // TypeScript private, compile time only
  constructor(public width: number, public height: number) {
    super("rect");
  }
  area(): number { return (this.cache ??= this.width * this.height); }
  get isSquare(): boolean { return this.width === this.height; }
  override describe(): string { return super.describe().toUpperCase(); }
}

const r = new Rect(3, 4);
console.log(r.area(), r.isSquare, r.describe());
console.log(Base.count, r instanceof Base);

function first<T>(items: T[]): T | undefined {
  return items[0];
}
const n = first([3, 1, 2]);       // number | undefined
const s = first(["a", "b"]);      // string | undefined

// Generic interface with a default type parameter
interface ApiResponse<TData, TError = string> {
  ok: boolean;
  data?: TData;
  error?: TError;
}
type Pair<A, B> = [A, B];

// Generic class
class Stack<T> {
  private items: T[] = [];
  push(item: T): this { this.items.push(item); return this; }
  pop(): T | undefined { return this.items.pop(); }
  get size(): number { return this.items.length; }
}

const res: ApiResponse<{ id: number }> = { ok: true, data: { id: 7 } };
const pair: Pair<string, number> = ["age", 30];
const stack = new Stack<number>().push(1).push(2);

console.log(n, s, res.data?.id);
console.log(pair, stack.pop(), stack.size);

function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

// K must be a key of T, and the return type follows the key
function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// One parameter constrained by another
function merge<T extends object, U extends Partial<T>>(base: T, patch: U): T & U {
  return { ...base, ...patch };
}

// const type parameter (TS 5.0): literal types without writing `as const`
function routes<const T extends readonly string[]>(paths: T): T {
  return paths;
}

const user = { id: 1, name: "Shree", tags: ["ts"] };
const r = routes(["/home", "/about"]);   // readonly ["/home", "/about"]

console.log(longest("cat", "tiger"), longest([1, 2], [3]));
console.log(get(user, "name"), get(user, "tags"));
console.log(merge(user, { name: "Shri" }));
console.log(r);

function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

const user = { id: 1, name: "Shree" };
get(user, "age");
longest(10, 20);

const config = {
  port: 3000,
  db: { host: "localhost", pool: 10 },
  features: ["auth", "cache"],
};

type Config = typeof config;                 // the type of a value
type ConfigKey = keyof Config;               // "port" | "db" | "features"
type Db = Config["db"];                      // { host: string; pool: number }
type Host = Config["db"]["host"];            // string
type Feature = Config["features"][number];   // string
type PortOrDb = Config["port" | "db"];       // number | { host: string; pool: number }

function setting<K extends ConfigKey>(key: K): Config[K] {
  return config[key];
}

// typeof a function, then pull pieces out of it
function createUser(name: string, admin = false) {
  return { name, admin, createdAt: 0 };
}
type NewUser = ReturnType<typeof createUser>;     // { name: string; admin: boolean; createdAt: number }
type CreateArgs = Parameters<typeof createUser>;  // [name: string, admin?: boolean]

const u: NewUser = createUser("Shree");
const args: CreateArgs = ["Ana", true];

console.log(setting("port"), setting("db").host);
console.log(Object.keys(config) as ConfigKey[]);
console.log(u, args);

type User = { id: number; name: string; email?: string };

// Visit every key K of T and decide its value type
type Nullable<T> = { [K in keyof T]: T[K] | null };

// Add or remove modifiers with + and -
type Mutable<T> = { -readonly [K in keyof T]: T[K] };
type Concrete<T> = { [K in keyof T]-?: T[K] };
type Frozen<T> = { +readonly [K in keyof T]: T[K] };

// Remap keys with `as`: rename them, or drop one by mapping it to never
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type WithoutId<T> = { [K in keyof T as K extends "id" ? never : K]: T[K] };

// Map over any union of strings, not only keyof
type Flags = { [K in "dark" | "beta"]: boolean };

function makeGetters<T extends object>(obj: T): Getters<T> {
  const out: Record<string, () => unknown> = {};
  for (const key of Object.keys(obj) as (keyof T & string)[]) {
    out[`get${key[0].toUpperCase()}${key.slice(1)}`] = () => obj[key];
  }
  return out as Getters<T>;
}

const g = makeGetters({ id: 1, name: "Shree" });
const patch: WithoutId<User> = { name: "Shri" };
const flags: Flags = { dark: true, beta: false };
const draft: Nullable<User> = { id: null, name: "Shree" };

console.log(g.getId(), g.getName());
console.log(patch, flags);
console.log(draft);

type IsString<T> = T extends string ? true : false;
type A = IsString<"hi">;                     // true
type B = IsString<42>;                       // false

// Distribution over a union, and how to switch it off
type ToArray<T> = T extends unknown ? T[] : never;
type ToArrayAll<T> = [T] extends [unknown] ? T[] : never;
type C = ToArray<string | number>;           // string[] | number[]
type D = ToArrayAll<string | number>;        // (string | number)[]

// infer captures a piece of the matched type
type ElementOf<T> = T extends readonly (infer E)[] ? E : T;
type Unwrap<T> = T extends Promise<infer V> ? Unwrap<V> : T;
type FirstArg<F> = F extends (first: infer P, ...rest: any[]) => any ? P : never;
type RouteParam<S> = S extends `${string}:${infer P}/${infer Rest}`
  ? P | RouteParam<`/${Rest}`>
  : S extends `${string}:${infer P}` ? P : never;

type E = ElementOf<number[]>;                          // number
type F = Unwrap<Promise<Promise<string>>>;             // string
type G = FirstArg<(id: number, name: string) => void>; // number
type R = RouteParam<"/users/:userId/posts/:postId">;   // "userId" | "postId"

// At runtime: params must have exactly the keys found in the path
function buildPath<P extends string>(path: P, params: Record<RouteParam<P>, string>): string {
  return path.replace(/:(\w+)/g, (_, k: string) => (params as Record<string, string>)[k]);
}

console.log(buildPath("/users/:userId/posts/:postId", { userId: "42", postId: "7" }));
console.log(buildPath("/teams/:teamId", { teamId: "backend" }));

type Size = "sm" | "md" | "lg";
type Color = "red" | "blue";
type ClassName = `btn-${Size}-${Color}`;    // 6 combinations

type EventName<T extends string> = `on${Capitalize<T>}`;
type Handlers = { [E in "click" | "focus" as EventName<E>]: () => void };
// { onClick: () => void; onFocus: () => void }

// The four built in string helpers
type Loud = Uppercase<"get">;         // "GET"
type Quiet = Lowercase<"POST">;       // "post"
type Cap = Capitalize<"user">;        // "User"
type Uncap = Uncapitalize<"Item">;    // "item"

// Pattern types: any string with this shape
type Px = `${number}px`;
type ApiPath = `/api/${string}`;

// Split a dotted path into a tuple, one segment at a time
type Split<S extends string, D extends string> =
  S extends `${infer Head}${D}${infer Tail}` ? [Head, ...Split<Tail, D>] : [S];
type Parts = Split<"a.b.c", ".">;     // ["a", "b", "c"]

const cls: ClassName = "btn-md-blue";
const width: Px = "240px";
const path: ApiPath = "/api/users";
const parts: Parts = ["a", "b", "c"];
const handlers: Handlers = { onClick: () => console.log("clicked"), onFocus: () => {} };

handlers.onClick();
console.log(cls, width, path, parts);

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  bio?: string;
}

type UserPatch = Partial<User>;                      // every key optional
type FullUser = Required<User>;                      // bio required too
type FrozenUser = Readonly<User>;                    // every key readonly
type PublicUser = Omit<User, "password">;            // drop keys
type Credentials = Pick<User, "email" | "password">; // keep keys
type UsersById = Record<number, PublicUser>;         // keys and one value type
type UpdateBody = Partial<Omit<User, "id">> & Pick<User, "id">;  // combine them

function update(user: User, patch: UserPatch): User {
  return { ...user, ...patch };
}
function toPublic({ password, ...rest }: User): PublicUser {
  return rest;
}

const user: User = { id: 1, name: "Shree", email: "s@x.dev", password: "hunter2" };
const updated = update(user, { name: "Shri" });
const directory: UsersById = { [user.id]: toPublic(updated) };
const body: UpdateBody = { id: 1, bio: "backend" };

console.log(updated.name, Object.keys(toPublic(user)));
console.log(directory);
console.log(body);

type Status = "idle" | "loading" | "success" | "error";

type Active = Exclude<Status, "idle">;             // "loading" | "success" | "error"
type Done = Extract<Status, "success" | "error">;  // "success" | "error"
type Sure = NonNullable<string | null | undefined>; // string

async function fetchUser(id: number, withPosts = false) {
  return { id, name: "Shree", posts: withPosts ? 3 : 0 };
}

type Args = Parameters<typeof fetchUser>;     // [id: number, withPosts?: boolean]
type Result = ReturnType<typeof fetchUser>;   // Promise<{ id: number; name: string; posts: number }>
type UserData = Awaited<Result>;              // { id: number; name: string; posts: number }

class Logger { constructor(public prefix: string) {} }
type LoggerArgs = ConstructorParameters<typeof Logger>;  // [prefix: string]
type LoggerInstance = InstanceType<typeof Logger>;       // Logger

// NoInfer: only `options` decides T, so `fallback` must be one of them
function pickDefault<T extends string>(options: T[], fallback: NoInfer<T>): T {
  return options.includes(fallback) ? fallback : options[0];
}

async function main() {
  const args: Args = [7, true];
  const data: UserData = await fetchUser(...args);
  const loggerArgs: LoggerArgs = ["[api]"];
  const log: LoggerInstance = new Logger(...loggerArgs);
  const ready: Sure = "ready";
  console.log(log.prefix, data);
  console.log(pickDefault(["sm", "md"], "md"), ready);
}
main();

function pickDefault<T extends string>(options: T[], fallback: NoInfer<T>): T {
  return options.includes(fallback) ? fallback : options[0];
}

pickDefault(["sm", "md"], "lg");

type Cat = { kind: "cat"; meow(): string };
type Dog = { kind: "dog"; bark(): string };

// A type guard returns `value is Type`
function isCat(pet: Cat | Dog): pet is Cat {
  return pet.kind === "cat";
}

// An assertion function narrows everything after the call
function assertDefined<T>(value: T, msg: string): asserts value is NonNullable<T> {
  if (value === null || value === undefined) throw new Error(msg);
}

// satisfies checks the shape and keeps the precise type of each key
type Theme = Record<string, string | [number, number, number]>;
const palette = {
  coral: "#FF4D6D",
  violet: [131, 56, 236],
} satisfies Theme;

const pets: (Cat | Dog)[] = [
  { kind: "cat", meow: () => "meow" },
  { kind: "dog", bark: () => "woof" },
];

const cats = pets.filter(isCat);                       // Cat[]
const found = pets.find(isCat)!;                       // ! says "not undefined"
const raw = JSON.parse('{"n": 1}') as { n: number };  // as says "trust me"
const el = pets.length ? { value: "42" } : null;
assertDefined(el, "missing element");

console.log(cats.map((c) => c.meow()), found.kind);
console.log(palette.coral.toLowerCase(), palette.violet.join(","));
console.log(el.value, raw.n);

type Theme = Record<string, string | [number, number, number]>;

const annotated: Theme = { coral: "#FF4D6D", violet: [131, 56, 236] };
annotated.coral.toLowerCase();      // rejected: it might be a tuple

const checked = { coral: "#FF4D6D", violet: [131, 56, 236] } satisfies Theme;
checked.coral.toLowerCase();        // fine: coral is known to be a string

// Branded types: two strings the compiler keeps apart
type Brand<T, B extends string> = T & { readonly __brand: B };
type UserId = Brand<string, "UserId">;
type OrderId = Brand<string, "OrderId">;
const userId = (s: string) => s as UserId;
function loadUser(id: UserId) { return `user ${id}`; }

// Recursive types
type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K] };
type DeepReadonly<T> = { readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K] };
type Json = string | number | boolean | null | Json[] | { [key: string]: Json };

// Variadic tuples
type Prepend<H, T extends unknown[]> = [H, ...T];
function tail<T extends unknown[]>([, ...rest]: [unknown, ...T]): T { return rest; }

// A Result type instead of throwing
type Result<T, E = string> = { ok: true; value: T } | { ok: false; error: E };
function safeDivide(a: number, b: number): Result<number> {
  return b === 0 ? { ok: false, error: "divide by zero" } : { ok: true, value: a / b };
}

// An exhaustive lookup: every member of the union must be present
type Env = "dev" | "prod";
const urls = { dev: "localhost", prod: "api.example.com" } satisfies Record<Env, string>;

type Settings = { db: { host: string; port: number }; debug: boolean };
const overrides: DeepPartial<Settings> = { db: { port: 5433 } };
const payload: Json = { ids: [1, 2], meta: { draft: true } };
const args: Prepend<string, [number, boolean]> = ["x", 1, true];

console.log(loadUser(userId("u_42")));
console.log(overrides, payload);
console.log(tail(args), safeDivide(10, 4), safeDivide(1, 0));
console.log(urls.prod);

type UserId = string & { readonly __brand: "UserId" };
function loadUser(id: UserId) { return id; }

loadUser("u_42");                 // rejected: a plain string is not a UserId
loadUser("u_42" as UserId);       // fine: branded at the boundary

// types.ts
export interface User { id: number; name: string }
export type Role = "admin" | "viewer";
export default class Client {}

// api.ts
import Client, { type User } from "./types";   // inline type only import
import type { Role } from "./types";            // the whole line is erased
export type { User };                            // re-export a type

// A constant injected at build time
declare const __APP_VERSION__: string;

// Importing a file type
declare module "*.svg" {
  const src: string;
  export default src;
}

// Module augmentation: add a field to Express's Request
declare module "express-serve-static-core" {
  interface Request { userId?: string }
}

// Add to a global interface
declare global {
  interface Window { analytics?: { track(event: string): void } }
}
export {};

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true,
    "declaration": true,
    "outDir": "dist"
  },
  "include": ["src"]
}