$devvkit resources --cheatsheet typescript-cheatsheet

TypeScript Cheatsheet

[programming]

TypeScript types, interfaces, generics, utility types, and advanced patterns for safer code.

TypeScript adds static typing to JavaScript, catching bugs at compile time and providing better IDE tooling. This cheatsheet covers basic types, interfaces, generics, discriminated unions, utility types, and common patterns.

All examples target TypeScript 5.x with strict mode enabled.

Basic Types & Annotations

$let name: string = "Alice"

Type annotation after colon. :string, :number, :boolean, etc.Example: const age: number = 30

$const items: string[] = ["a", "b"]

Array type — string[], number[], or Array<string>.Example: const matrix: number[][] = [[1,2], [3,4]]

$const pair: [string, number] = ["x", 1]

Tuple — fixed-length array with typed positions.Example: const entry: [string, number] = ["age", 30]

$let value: string | null = null

Union type — can be one of several types.Example: const result: number | undefined = parseFloat(input)

Interfaces & Type Aliases

$interface User { name: string; age: number }

Interface — defines the shape of an object. Can be extended.Example: interface Admin extends User { role: "admin" }

$type Point = { x: number; y: number }

Type alias — works for primitives, unions, and intersections too.Example: type ID = string | number

Generics

$interface Response<T> { data: T; error?: string }

Generic interface — the type is parameterized and passed in.Example: const res: Response<User> = await fetchUser()

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

Generic function — captures the type from the argument.Example: const first = <T>(arr: T[]): T => arr[0]

$type Result<T> = T extends string ? "str" : "other"

Conditional type — selects type based on a condition.Example: type IsString<T> = T extends string ? true : false

Union & Intersection Types

$type Status = "active" | "inactive" | "pending"

Union of string literals — restricts to exact values.Example: type Theme = "light" | "dark" | "system"

$type Combined = A & B

Intersection type — combines all properties of A and B.Example: type Admin = User & { permissions: string[] }

$if (typeof x === "string") { x.toUpperCase() }

Type narrowing — TypeScript narrows type inside the guard.Example: if (Array.isArray(x)) { x.push(1) }

Utility Types

$Partial<T>

Make all properties of T optional.Example: type PartialUser = Partial<User>

$Required<T>

Make all properties of T required.Example: type RequiredConfig = Required<AppConfig>

$Pick<T, K>

Create a type with only the specified keys from T.Example: type UserName = Pick<User, "firstName" | "lastName">

$Omit<T, K>

Create a type without the specified keys.Example: type UserWithoutPassword = Omit<User, "password">

$Record<K, V>

Create an object type with keys K and values V.Example: type PageMap = Record<string, React.ComponentType>

$ReturnType<typeof fn>

Extract the return type of a function.Example: type FetchResult = ReturnType<typeof fetchUser>

Advanced Patterns

$as const

Mark a value as deeply read-only with literal types.Example: const COLORS = ["red", "green"] as const

$satisfies operator

Check that a value matches a type without widening it (TS 4.9+).Example: const palette = { red: [255,0,0] } satisfies Record<string, [number,number,number]>

TypeScript Cheatsheet

TypeScript types, interfaces, generics, utility types, and advanced patterns for safer code.

All examples target TypeScript 5.x with strict mode enabled.

Basic Types & Annotations

let name: string = "Alice" — Type annotation after colon. :string, :number, :boolean, etc.

Example: const age: number = 30

const items: string[] = ["a", "b"] — Array type — string[], number[], or Array<string>.

Example: const matrix: number[][] = [[1,2], [3,4]]

const pair: [string, number] = ["x", 1] — Tuple — fixed-length array with typed positions.

Example: const entry: [string, number] = ["age", 30]

let value: string | null = null — Union type — can be one of several types.

Example: const result: number | undefined = parseFloat(input)

Interfaces & Type Aliases

interface User { name: string; age: number } — Interface — defines the shape of an object. Can be extended.

Example: interface Admin extends User { role: "admin" }

type Point = { x: number; y: number } — Type alias — works for primitives, unions, and intersections too.

Example: type ID = string | number

Generics

interface Response<T> { data: T; error?: string } — Generic interface — the type is parameterized and passed in.

Example: const res: Response<User> = await fetchUser()

function identity<T>(arg: T): T { return arg } — Generic function — captures the type from the argument.

Example: const first = <T>(arr: T[]): T => arr[0]

type Result<T> = T extends string ? "str" : "other" — Conditional type — selects type based on a condition.

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

Union & Intersection Types

type Status = "active" | "inactive" | "pending" — Union of string literals — restricts to exact values.

Example: type Theme = "light" | "dark" | "system"

type Combined = A & B — Intersection type — combines all properties of A and B.

Example: type Admin = User & { permissions: string[] }

if (typeof x === "string") { x.toUpperCase() } — Type narrowing — TypeScript narrows type inside the guard.

Example: if (Array.isArray(x)) { x.push(1) }

Utility Types

Partial<T> — Make all properties of T optional.

Example: type PartialUser = Partial<User>

Required<T> — Make all properties of T required.

Example: type RequiredConfig = Required<AppConfig>

Pick<T, K> — Create a type with only the specified keys from T.

Example: type UserName = Pick<User, "firstName" | "lastName">

Omit<T, K> — Create a type without the specified keys.

Example: type UserWithoutPassword = Omit<User, "password">

Record<K, V> — Create an object type with keys K and values V.

Example: type PageMap = Record<string, React.ComponentType>

ReturnType<typeof fn> — Extract the return type of a function.

Example: type FetchResult = ReturnType<typeof fetchUser>

Advanced Patterns

as const — Mark a value as deeply read-only with literal types.

Example: const COLORS = ["red", "green"] as const

satisfies operator — Check that a value matches a type without widening it (TS 4.9+).

Example: const palette = { red: [255,0,0] } satisfies Record<string, [number,number,number]>