Cheatsheet
TypeScript Cheatsheet
Every TypeScript feature you actually use. From basic annotations to advanced conditional types.
TypeScript adds a type system on top of JavaScript. Basic use is straightforward; advanced use (conditional types, template literal types, mapped types) is where TypeScript power lives. This cheatsheet covers both tiers.
Basic types
`string`, `number`, `boolean`, `null`, `undefined`, `void`, `never`, `unknown`, `any` (avoid).
Arrays: `number[]` or `Array<number>`. Tuples: `[string, number]`.
Objects: `{ name: string; age: number }` or `Record<string, number>` for maps.
Interface vs type
Both define shape. Use `interface` for object shapes that may be extended; `type` for unions, intersections, and complex expressions.
Union: `type Status = 'idle' | 'loading' | 'done'`.
Intersection: `type A = B & C`.
Generics
`function first<T>(xs: T[]): T | undefined { return xs[0]; }`. Constrain: `<T extends { id: string }>`.
In interfaces: `interface Box<T> { value: T }`.
Utility types
The essentials for daily use.
- `Partial<T>` — all properties optional
- `Required<T>` — all properties required
- `Readonly<T>` — no mutation
- `Pick<T, K>` — subset of properties
- `Omit<T, K>` — everything except K
- `Record<K, V>` — object with K keys, V values
- `Awaited<T>` — unwrap a Promise
- `ReturnType<F>` — extract return type of a function
Type narrowing
`typeof x === 'string'` narrows to string. `'name' in obj` narrows to variants containing name.
Type guards: `function isString(x: unknown): x is string { return typeof x === 'string'; }`.
Never trust `any`; prefer `unknown` and narrow.
Frequently asked questions
interface or type — when to use which?
interface for objects that may be extended; type for unions and complex expressions. Consistency inside a codebase matters more than which one.
Is `any` ever okay?
Rarely. Migrating from JavaScript, temporarily. Otherwise prefer `unknown` and narrow, or fix the underlying type.
How do I type a React component?
`function Foo(props: FooProps) { ... }` or `const Foo: React.FC<FooProps> = (props) => { ... }`. Prefer the plain function form.
What is a conditional type?
`type IsString<T> = T extends string ? true : false`. Used heavily in utility types.
Should I use TypeScript for small projects?
Overkill for one-file scripts. Very worth it past ~500 lines.
Keep exploring
Made for exam season
Pass that exam.
Turn your notes into flashcards and quizzes in seconds. Study smarter — start free today.