TypeScript Cheat Sheet: Types, Generics & Utilities

Quick reference tables

Primitive types

Type declaration syntax

Union & intersection

Utility types

Type narrowing / guards

Generics — common patterns

tsconfig — key options

Detailed sections

Interfaces vs type aliases

// Interface — extendable, good for objects and classes
interface User {
  id: number;
  name: string;
  email?: string; // optional
}

// Extend an interface
interface AdminUser extends User {
  role: "admin" | "superadmin";
}

// Type alias — more flexible, good for unions and computed types
type Status = "active" | "inactive" | "pending";
type ID = string | number;
type UserOrAdmin = User | AdminUser;

// When to use which:
// - Interface: when defining object shapes, especially for classes
// - Type alias: for unions, primitives, computed types, or when you need `Exclude`/`Extract`

Generics in practice

// Generic function
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

const n = first([1, 2, 3]);     // type: number | undefined
const s = first(["a", "b"]);    // type: string | undefined

// Generic with constraint
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: "Alice", age: 30 };
getProperty(user, "name"); // string
getProperty(user, "age");  // number
// getProperty(user, "email"); // Error: not a key of user

// Generic interface
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

type UserResponse = ApiResponse<User>;
type ListResponse = ApiResponse<User[]>;

Utility types — real examples

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  role: "user" | "admin";
}

// Partial — all optional (useful for update functions)
function updateUser(id: number, data: Partial<User>) { ... }
updateUser(1, { name: "Alice" }); // only name, no other fields required

// Pick — keep only what you need (useful for API responses)
type PublicUser = Pick<User, "id" | "name" | "role">;
// { id: number; name: string; role: "user" | "admin" }

// Omit — remove sensitive fields
type SafeUser = Omit<User, "password">;

// Record — typed dictionary/map
type RolePermissions = Record<User["role"], string[]>;
const perms: RolePermissions = {
  user: ["read"],
  admin: ["read", "write", "delete"],
};

// ReturnType — get what a function returns
async function fetchUser(id: number) {
  return { id, name: "Alice", role: "user" as const };
}
type FetchedUser = Awaited<ReturnType<typeof fetchUser>>;
// { id: number; name: string; role: "user" }

Type guards

// typeof guard
function format(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase(); // TypeScript knows it's string here
  }
  return value.toFixed(2); // TypeScript knows it's number here
}

// instanceof guard
function processDate(value: Date | string): Date {
  if (value instanceof Date) {
    return value;
  }
  return new Date(value);
}

// Custom type guard (predicate function)
interface Cat { meow(): void }
interface Dog { bark(): void }

function isCat(pet: Cat | Dog): pet is Cat {
  return (pet as Cat).meow !== undefined;
}

function makeSound(pet: Cat | Dog) {
  if (isCat(pet)) {
    pet.meow(); // TypeScript knows it's Cat
  } else {
    pet.bark(); // TypeScript knows it's Dog
  }
}

// Discriminated union — the cleanest pattern
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rectangle"; width: number; height: number }
  | { kind: "triangle"; base: number; height: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle": return Math.PI * shape.radius ** 2;
    case "rectangle": return shape.width * shape.height;
    case "triangle": return 0.5 * shape.base * shape.height;
  }
}

as const — immutable literal types

// Without as const — type is string[]
const directions = ["north", "south", "east", "west"];
// type: string[]

// With as const — type is readonly tuple of literals
const directions = ["north", "south", "east", "west"] as const;
// type: readonly ["north", "south", "east", "west"]

type Direction = typeof directions[number];
// type: "north" | "south" | "east" | "west"

// Great for config objects
const config = {
  env: "production",
  version: 3,
  features: ["auth", "analytics"],
} as const;

type Env = typeof config.env; // "production" (not string)

Mapped types

// Make all properties nullable
type Nullable<T> = { [K in keyof T]: T[K] | null };

// Make all properties async getters
type AsyncGetters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => Promise<T[K]>;
};

// Filter properties by value type
type OnlyStrings<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K];
};

interface Mixed { name: string; age: number; email: string; active: boolean }
type StringFields = OnlyStrings<Mixed>;
// { name: string; email: string }

Template literal types

type EventName = "click" | "focus" | "blur";
type HandlerName = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur"

type CSSProperty = "margin" | "padding";
type CSSDirections = "top" | "right" | "bottom" | "left";
type CSSLonghand = `${CSSProperty}-${CSSDirections}`;
// "margin-top" | "margin-right" | ... | "padding-left"

// Useful for typed event emitters
type EventMap = {
  "user:login": { userId: string };
  "user:logout": { userId: string };
  "order:created": { orderId: number };
};

type EventKey = keyof EventMap; // "user:login" | "user:logout" | "order:created"

Strict tsconfig for new projects

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "exactOptionalPropertyTypes": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Related Articles

Deepen your understanding with these curated continuations.

View All Articles

Cheatsheet5 min read

React Hooks Cheat Sheet: All Hooks with React 19

Complete React Hooks reference — useState, useEffect, useMemo, useCallback, custom hooks, and React 19's new use(), useOptimistic, and useActionState.

ScarlettMay 20, 2026

Cheatsheet5 min read

Next.js App Router Cheat Sheet (Next.js 15, 2026)

Complete Next.js App Router reference — file conventions, Server vs Client Components, data fetching, Server Actions, metadata, and Pages Router migration table.

VishnuMay 15, 2026

Cheatsheet5 min read

Tailwind CSS v4 Cheat Sheet: Layout, Flex & Grid

Complete Tailwind CSS v4 reference for layout, spacing, and typography. Master flexbox, grid, responsive design, and dark mode with this essential guide.

VishnuDec 26, 2025