TypeScript Cheat Sheet

let name: string = 'Alice';
let age: number = 30;
let active: boolean = true;
let id: bigint = 100n;
let sym: symbol = Symbol('id');

let nums: number[] = [1, 2, 3];
let strs: Array<string> = ['a', 'b'];
let pair: [string, number] = ['age', 30];

let val: any = 42;       // opts out of checking
let safe: unknown = 42;  // must narrow before use
function fail(): never { throw new Error(); }

type Status = 'active' | 'inactive';
type ID = string | number;
let s: Status = 'active';

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

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

type Point = { x: number; y: number };
type Callback = (data: string) => void;
type Result = Success | Failure;

type AdminUser = User & { permissions: string[] };

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}
first<number>([1, 2, 3]); // 1

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

interface ApiResponse<T> {
  data: T;
  status: number;
  error?: string;
}

function merge<A, B>(a: A, b: B): A & B {
  return { ...a, ...b };
}

Partial<User>    // all fields optional
Required<User>   // all fields required

Pick<User, 'name' | 'email'>  // only those keys
Omit<User, 'id'>              // all except id

type Scores = Record<string, number>;
const s: Scores = { math: 90, eng: 85 };

type R = ReturnType<typeof fetchUser>;   // return type
type P = Parameters<typeof fetchUser>;   // param tuple

Readonly<User>              // all fields readonly
NonNullable<string | null>  // string

function format(val: string | number) {
  if (typeof val === 'string') return val.toUpperCase();
  return val.toFixed(2);
}

if ('permissions' in user) {
  // user is Admin here
}

function isUser(val: unknown): val is User {
  return typeof val === 'object' && val !== null && 'name' in val;
}

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'rect'; width: number; height: number };

function area(s: Shape) {
  switch (s.kind) {
    case 'circle': return Math.PI * s.radius ** 2;
    case 'rect': return s.width * s.height;
  }
}

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

const ROLES = ['admin', 'user', 'guest'] as const;
type Role = typeof ROLES[number];
// 'admin' | 'user' | 'guest'

const config = {
  port: 3000,
  host: 'localhost',
} satisfies Record<string, string | number>;

async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  console.log(e.currentTarget.value);
}

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}
function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}