---

Source: z2h.fyi/cheatsheets/typescript-advanced — Zero to Hero cheatsheets for developers.

TypeScript Advanced

Quick Overview

TypeScript adds static typing to JavaScript. Advanced features let you write reusable, type‑safe abstractions.

Getting Started

• Ensure you have TypeScript 5.2 or newer (npm i -D typescript@latest).
• Add a tsconfig.json with "strict": true.

Core Concepts

Concept	Description
Generics	Parameterized types for reusable components.
Conditional Types	Types that depend on a condition (T extends U ? X : Y).
Mapped Types	Transform properties of existing types.
Utility Types	Pre‑built helpers like Partial<T>, Pick<T,K>.

Essential Commands / Syntax

• type Box<T> = { value: T }; – generic type.
• type IsString<T> = T extends string ? true : false; – conditional.
• type ReadonlyProps<T> = { readonly [K in keyof T]: T[K] }; – mapped.
• Partial<User> – makes all fields optional.

Common Patterns

• Reusable API client – generic fetch<T>(url): Promise<T>.
• Form state – mapped type to make all fields required/optional.
• Deep partial – combine conditional and mapped types for deep updates.

Gotchas & Tips

• Over‑using generics can make error messages hard to read.
• Remember that conditional types are distributive over unions.
• Use as const to preserve literal types.

Next Steps

• Read the official TypeScript handbook section on Advanced Types.
• Try the “Advanced TypeScript” course on Frontend Masters.