TypeScript — Cheat Sheet

Why TypeScript, and How It Runs

// TypeScript
interface User { id: number; name: string }
function greet(user: User): string {
  return `Hi ${user.name}`
}

// Compiled JavaScript — the interface does not exist at runtime
function greet(user) {
  return `Hi ${user.name}`
}

// Which means this is impossible:
if (value instanceof User) { }        // Error: 'User' only refers to a type

// And this compiles, then explodes at runtime:
const data = await res.json() as User   // 'as' is a claim, not a check
data.name.toUpperCase()                 // undefined if the API changed

Basic Types, Inference and Annotations

let name: string = 'Akshay'
let count: number = 42            // one number type — no int/long/float
let big: bigint = 9007199254740993n
let ok: boolean = true
let nothing: null = null
let missing: undefined = undefined
let key: symbol = Symbol('id')

// Arrays and tuples
let scores: number[] = [90, 85]
let pair: [string, number] = ['arrays', 12]        // fixed length and order
let named: [x: number, y: number] = [1, 2]         // labels, for readability

// any switches off checking; unknown keeps it on
let a: any = getValue()
a.whatever.deeply.nested       // compiles, may explode

let u: unknown = getValue()
u.whatever                     // Error — must narrow first
if (typeof u === 'string') u.toUpperCase()   // now allowed

// never — the type with no values; the return type of a function that throws
function fail(msg: string): never { throw new Error(msg) }

Interfaces, Type Aliases and Structural Typing

interface Point { x: number; y: number }

class Vector { constructor(public x: number, public y: number) {} }

function length(p: Point) { return Math.hypot(p.x, p.y) }

length(new Vector(3, 4))          // fine — Vector has x and y
length({ x: 3, y: 4 })            // fine — the literal has x and y
// In Java, Vector would have to declare 'implements Point'.

// Extra properties are allowed... except on fresh object literals
const v = { x: 3, y: 4, z: 5 }
length(v)                         // OK — v is a variable
length({ x: 3, y: 4, z: 5 })      // Error — excess property check
// The literal check exists to catch typos in options objects.

Unions, Narrowing and Discriminated Unions

function format(value: string | number | null) {
  if (value === null) return '—'          // value: string | number after this
  if (typeof value === 'string') return value.trim()   // string here
  return value.toFixed(2)                 // number — the only thing left
}

// The narrowing tools
typeof x === 'string'
x instanceof Date
'role' in user                        // property presence
Array.isArray(x)
x === null / x !== undefined
x?.length                             // optional chaining narrows too

// Truthiness narrows, and has the classic trap
if (count) { }        // excludes 0 as well as undefined — usually a bug
if (count != null) { }  // excludes null AND undefined, keeps 0

// A custom type guard, for when the built-ins cannot express it
function isProblem(x: unknown): x is Problem {
  return typeof x === 'object' && x !== null && 'slug' in x
}
if (isProblem(data)) data.slug        // narrowed by the return type

Generics

// Loses the type
function firstAny(arr: any[]): any { return arr[0] }
const n = firstAny([1, 2, 3])       // any — no help downstream

// Keeps it
function first<T>(arr: T[]): T | undefined { return arr[0] }
const m = first([1, 2, 3])          // number | undefined — inferred, no <number> needed

// Two parameters, related
function mapValues<T, U>(obj: Record<string, T>, fn: (v: T) => U): Record<string, U> {
  return Object.fromEntries(
    Object.entries(obj).map(([k, v]) => [k, fn(v)]),
  ) as Record<string, U>
}

// A typed fetch wrapper — the pattern you will actually write
async function api<T>(path: string): Promise<T> {
  const res = await fetch(path)
  if (!res.ok) throw new Error(res.statusText)
  return res.json() as Promise<T>
}
const problems = await api<Problem[]>('/api/problems')

Utility Types

interface User {
  id: number
  name: string
  email: string
  role: 'student' | 'admin'
}

Partial<User>              // every field optional — PATCH payloads
Required<User>             // every field required
Readonly<User>             // every field readonly

Pick<User, 'id' | 'name'>          // { id, name }
Omit<User, 'id'>                   // everything except id — creation payloads

Record<'easy' | 'hard', number>    // { easy: number; hard: number }

// Realistic use
type CreateUser = Omit<User, 'id'>
type UpdateUser = Partial<Omit<User, 'id'>>
type UserCard   = Pick<User, 'name' | 'role'>

// Rename a field on User and every one of these updates with it.
// Hand-written duplicates would silently drift.

Advanced Types — Mapped, Conditional and Template Literal

type Partial<T> = { [K in keyof T]?: T[K] }
type Readonly<T> = { readonly [K in keyof T]: T[K] }
type Nullable<T> = { [K in keyof T]: T[K] | null }

// Removing modifiers with minus
type Mutable<T> = { -readonly [K in keyof T]: T[K] }
type Concrete<T> = { [K in keyof T]-?: T[K] }

// Remapping keys with 'as'
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
}
type UserGetters = Getters<{ name: string; age: number }>
// { getName: () => string; getAge: () => number }

// Filtering keys — map to never to drop them
type OnlyStrings<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K]
}

Classes and OOP in TypeScript

abstract class Repository<T> {
  protected constructor(protected readonly db: Db) {}
  abstract findById(id: string): Promise<T | null>

  async requireById(id: string): Promise<T> {
    const found = await this.findById(id)
    if (!found) throw new NotFoundError(id)
    return found
  }
}

class ProblemRepo extends Repository<Problem> implements Searchable {
  // parameter properties — declares and assigns in one line
  constructor(db: Db, private readonly cache: Cache) { super(db) }

  async findById(id: string) { ... }

  #secret = 'value'        // true runtime privacy (JS private field)
  private soft = 'value'   // compile-time only — visible at runtime
}

// static, getters, and index signatures all work as expected
class Config {
  static readonly VERSION = '2.0'
  get isProd() { return process.env.NODE_ENV === 'production' }
}

TypeScript with React

interface ProblemCardProps {
  problem: Problem
  locked?: boolean
  onOpen: (slug: string) => void
  children?: React.ReactNode
}

export function ProblemCard({ problem, locked = false, onOpen, children }: ProblemCardProps) {
  ...
}

// Avoid React.FC — it adds an implicit children prop and complicates generics.
// A plain annotated parameter is clearer.

// Extending native element props — the pattern for design-system components
interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
  variant?: 'primary' | 'ghost'
}
export function Button({ variant = 'primary', ...rest }: ButtonProps) {
  return <button className={styles[variant]} {...rest} />
}
// Now className, disabled, onClick, aria-* all typecheck for free.

// ReactNode = anything renderable. ReactElement = specifically an element.

Typing the API Boundary

import { z } from 'zod'

const ProblemSchema = z.object({
  slug: z.string(),
  title: z.string(),
  difficulty: z.enum(['easy', 'medium', 'hard']),
  tags: z.array(z.string()),
  hints: z.array(z.string()).nullable(),
})
type Problem = z.infer<typeof ProblemSchema>    // the type, derived

export async function getProblem(slug: string): Promise<Problem> {
  const res = await fetch(`/api/problems/${slug}`)
  if (!res.ok) throw new ApiError(res.status, await res.text())
  return ProblemSchema.parse(await res.json())  // throws on mismatch
}

// Compare: 'as Problem' claims the shape and fails 200 lines later
// with "cannot read property of undefined", far from the real cause.

// safeParse when a failure is expected and handled
const result = ProblemSchema.safeParse(input)
if (!result.success) return { error: result.error.flatten() }

Migrating and Living With TypeScript

// 1. Add TypeScript with the loosest possible config
{ "compilerOptions": { "allowJs": true, "strict": false, "noEmit": true } }

// 2. Convert leaf-first: utilities and types before components.
//    A typed module makes everything importing it better; a typed
//    component with untyped dependencies fights inference.

// 3. Turn on strict flags one at a time, fixing as you go
"noImplicitAny": true        // usually the largest single batch
"strictNullChecks": true     // usually the most valuable

// 4. Check JS files without renaming them
// @ts-check at the top of a .js file, with JSDoc types:
/** @param {string} slug @returns {Promise<Problem>} */
async function getProblem(slug) { ... }

// 5. Ratchet: never let the error count go up.
//    tsc --noEmit in CI, and each PR must not add errors.

TypeScript on the Server

// package.json
{ "type": "module" }              // .js files are ESM
// without it, .js is CommonJS

// tsconfig for modern Node
{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ES2022",
    "types": ["node"]
  }
}

// With NodeNext, relative ESM imports need the extension —
// and it is the OUTPUT extension, which trips everyone up:
import { score } from './scoring.js'     // even though the file is .ts

// Running it
node --experimental-strip-types src/index.ts    // Node 22+
tsx src/index.ts                                 // the common dev tool
// Both strip types without checking — still run tsc --noEmit separately.

// __dirname does not exist in ESM:
import { fileURLToPath } from 'node:url'
const __dirname = path.dirname(fileURLToPath(import.meta.url))