How TypeScript checks code
Pass extra membersAllowed, types are structural
Add a key to a fresh literalError, the excess property check
TypeScript
Done 0/0
To review 0
Old way, still asked about
The usual way today
Added in 2022 or later
The model
- TypeScript is JavaScript plus static types. The compiler checks them before the code runs, then erases them, so the JavaScript that runs has none.
- Types are structural. A value fits a type when it has the members the type asks for, whatever its class or name.
- Types are gone at runtime, so
asand interfaces can't check any data. A value from an API orJSON.parseneeds a real check in code. - On a union such as
string | number, you can use only what every member shares. A check liketypeofnarrows the type inside its branch. - Under strict mode,
nullandundefinedare separate types, so the compiler makes you handle a missing value.strictis on by default since TypeScript 6.0.
Types & inference
annotate what you must, let the compiler infer the restAnnotate or infer
Annotate a function
f(x: string): numberType an array
string[]Array<string>Infer a variable's type
let n = 42Infers numberInfer from a const
const d = "up"The literal "up". let gives stringTrapUnder strict, a parameter needs a type unless it has a default or gets one from context, as a callback does.
Primitive and special types
List the 7 primitives
string, number, boolean, null, undefined, symbol, bigintAccept any value safely
x: unknownNarrow it before useTurn checking off
x: anyOnly for short-term migrationTrapany spreads. Anything you read from an any value is any too, so one any can silence checks far from where it started.
Tuples, literals and enums
Type a tuple
[string, number]Allow fixed values
"up" | "down"Name a set of constants
enum Dir { Up, Down }A real object at runtimeTipA union of string literals gives an enum's checks with no runtime code. Use an enum when you need an object to loop over.
Objects & interfaces
describe what an object must haveInterfaces, optional and readonly
Describe an object
interface User { id: number }Make a property optional
email?: stringReads as string | undefinedBlock reassignment
readonly id: numberReadonly<User>Trapreadonly is compile-time and shallow. Nothing freezes the object, and a nested object's fields can still change.
Interface or type alias
Name a union or tuple
type Id = A | BOnly type canExtend a shape
interface B extends Atype C = A & BReopen an interfaceDeclare it again. They merge
TipThe handbook's rule is to use interface until you need a feature only type has.
TrapWhen two parent types disagree on a property's type, extends reports an error. An intersection quietly makes it never.
Index signatures and Record
Type a dictionary
{ [key: string]: number }Require every key of a union
Record<Day, string>A missing or extra key is an errorTrapReading a key that isn't there still gives the value type, not undefined. Turn on no to get T | undefined.
Function types and overloads
Type a function value
(a: number) => stringMake a parameter optional
(a: string, b?: number)Type a callable object
{ (s: string): void; level: number }Overload a function
f(x: string): number;Signatures, then one bodyTrapstrict checks parameters strictly only in function syntax. Method syntax like add(a: number): number escapes it.
Unions & narrowing
hold one of several types, then find out whichUnions and narrowing
Accept either type, or both
A | BA & BNarrow with a runtime check
typeof x === "string"x instanceof Date"swim" in xWrite your own type guard
(x: unknown): x is UserAssert a type or throw
asserts v is stringTrapThe compiler trusts a type predicate without checking its body. A guard that says yes to the wrong values hides bugs.
Discriminated unions and never
Tag each member
{ kind: "circle"; r: number }Catch a missed case
const x: never = shapeIn the default branchType a function that throws
fail(): nevervoid still returnsHandle null and undefined
Read an optional value
user?.email ?? ""?? keeps 0, || doesn'tAssert a value isn't null
user.email!Drop null and undefined
NonNullable<T>Trap! does no runtime check. If the value is missing, the code still throws.
Assertions and satisfies
Assert a narrower type
el as HTMLCanvasElement Assert with angle brackets
<HTMLCanvasElement>el Doesn't work in .tsx filesCheck a value against a type
config satisfies ConfigKeeps its own type (4.9+)Trapas checks nothing at runtime. A wrong assertion compiles and fails later, so prefer a type guard.
Classes & decorators
fields, access, inheritance and decoratorsClasses and access modifiers
Declare and set a field
constructor(private id: number) {}Hide a member
privateprotectedClass, or class and subclassesHide a field at runtime too
#balance = 0Trapprivate is checked only at compile time, and plain JavaScript can still read the field. Use # for real privacy.
Extend, implement and abstract classes
Inherit from a base class
class B extends ACall super() before thisImplement interfaces
class A implements B, CMany allowed, but one extendsMake an abstract base
abstract area(): numberSubclasses must implement itTrapimplements only checks the class. It doesn't type the method parameters, so they still need annotations.
Static members, getters and setters
Put a member on the class
static PI = 3.14Read as MathUtils.PIAdd a getter and setter
get c(): numberset c(v: number)TrapStatic members can't use the class's type parameter T. One static side serves every instance type.
Decorators
Use standard decoratorsTC39, the default since 5.0, no flag
Use the legacy decorators
experimentalDecorators NestJS uses them. They don't mix with TC39Pass options to a decorator
@Log("debug")A factory returns the decoratorTipA legacy property decorator runs once per class, not once per object, and never sees the initial value.
TrapA class decorator can add members at runtime, but the type system never sees them, so callers need as any.
Generics
write code once and keep the exact typesGeneric functions and constraints
Keep the caller's type
identity<T>(x: T): TThe call infers TRequire
T to have a property<T extends { length: number }>Accept only real keys
<K extends keyof T>Returns T[K]Generic interfaces and classes
Make a generic interface
interface Box<T> { value: T }Default a type parameter
<T = unknown>Create an empty
Queuenew Queue<number>()Nothing infers T, so write itCovariance and contravariance
Use
T as input and outputInvariant. Neither direction fitsDeclare variance (4.7+)
<out T><in T>TrapMethod parameters stay bivariant, accepted in both directions, even under strict.
Asked in interviews
AskedWhat are covariance and contravariance in TypeScript?Utility & mapped types
build new types from the ones you haveUtility types
Make every property optional
Partial<User>Fits an update payloadKeep or drop properties
Pick<User, "id">Omit<User, "password">Read a function's types
ReturnType<typeof f>Parameters<typeof f>Keys, lookups and union filters
Get the keys as a union
keyof Personkeyof typeof objLook up a property's type
Person["name"]Users[number]Filter a union
Exclude<T, "a">Extract<T, "a">Mapped, conditional and template types
Map every property
[K in keyof T]: string-? removes the ?Rename or drop keys
[K in keyof T as N]Map to never to drop oneBranch on a type
T extends U ? X : Yinfer E captures a partBuild string types
`on${Capitalize<E>}`Turn an array into a union
typeof arr[number]After as constTipRecursive types like DeepReadonly call themselves. Deep recursion slows the compiler and can hit its instantiation limit.
TrapOn a bare type parameter, a conditional type runs per union member. Wrap both sides, [T] extends [U], to stop it.
Compiler & tsconfig
compile, configure and resolve importsCompile, check and run
Compile the project
tscRecompile on every change
tsc --watchType-check, write nothing
tsc --noEmitRun a .ts file directly
node app.tsStrips types, no type checkTrapVite, esbuild and SWC strip types without checking them. Run tsc --noEmit in CI so type errors fail the build.
tsconfig.json and strict mode
Pick the JS version and APIs
"target": "ES2020""lib": ["ES2020", "DOM"]Extend a base config
"extends": "./base.json"Pick one with tsc -pTurn on all strict checks
"strict": trueIncludes strictNullChecks Modules and namespaces
Export and import
export const x = 1import { x } from "./m"Import a name only as a type
import type { User }Removed from the outputGroup code the old way
namespace Geo {}Use ES modules in new codeTipBundlers drop a module's unused exports. A namespace compiles to one object they can't trim.
TrapA file with no top-level import or export is a global script, not a module.
Module resolution and .d.ts files
Set
moduleResolution "bundler""nodenext"For bundled apps, or Node.jsAdd an import alias
"paths": { "@/*": ["src/*"] }Drop settings 6.0 deprecated
node mode and baseUrl fail in 7.0Add a library's types
npm i -D @types/lodashAnd @types/node for NodeType an untyped package
declare module "lib"In a types-only .d.ts fileTrappaths only tells the compiler. The bundler or runtime needs the same alias, or the import fails when it runs.
Debug and speed up builds
Debug the .ts lines
"sourceMap": trueMap Node stack traces to .ts
node --enable-source-maps app.jsRead a long intersectionFlatten it with
Expand<T>Skip checking .d.ts files
"skipLibCheck": trueCheck each project once
"composite": truetsc --buildGet faster full buildsTypeScript 7.0, 8 to 12 times faster
TipSplit a long type into named steps and test each one with a literal. no shows whole types.
React, async & API data
components, promises, errors and data you receiveReact with TypeScript
Type a component's props
({ label }: ButtonProps)Type state that starts empty
useState<User | null>(null)Type a change event
ChangeEvent<HTMLInputElement> And FormEvent for a submitType reducer actions
{ type: "add" }A union tagged by typeTraptarget is where the event started, which can be a child. Use currentTarget for the element the handler is on.
Async code and API data
Run calls in parallel, typed
await Promise.all([a(), b()])Model success or failure
{ success: true; data: T }Validate untrusted data
Schema.safeParse(data) z.infer<typeof Schema>Trapresponse.json() and JSON.parse return any. Typing the result as User checks nothing at runtime.
Errors and Result types
Read a caught error
err instanceof ErrorIt's unknown under strictAdd fields to an error
extends ErrorSet name so logs show itReturn failure as a value
Result<User, string>Callers check successTrapTypeScript doesn't track what a function throws. Nothing makes a caller handle an exception.
Typed events and messages
Map events to payloads
{ "user:created": { id: string } }Type a payload by event name
emit<K extends keyof E>(e: K, data: E[K])Pick one message type
Extract<Msg, { type: T }>Migration & large codebases
migrate, test, organise and stay type-safe at scaleMigrate from JavaScript
Mix JavaScript files in
"allowJs": trueType-check JavaScript files
"checkJs": true// @ts-checkTypeScript reads JSDoc typesRaise strictness in stages
checkJs, noImplicitAny, then strictNullChecks Habits and anti-patterns
Stop copying typesDerive them with
Pick, Omit, typeof and keyofSilence one type error
// @ts-expect-errorErrors once fixed, unlike @ts-ignoreKeep look-alike IDs apart
string & { __brand: "UserId" }A branded typeTipTurn on strict from the start, and prefer a union of strings to an enum.
TrapTwo types with the same shape are interchangeable. A UserId and an OrderId that are both string mix freely.
Team rules and typed tests
Share one strict config
"extends": "../tsconfig.base.json" Ban explicit
any in lint@typescript-eslint/no-explicit-any Type a test data factory
(overrides: Partial<User>): UserBreaks when the type changesBig projects and shared contracts
Keep two API versions
APIv1.UserAPIv2.UserOne function maps old to newEvolve a shared contractAdd optional fields. Never rename or remove
TrapA breaking change to a shared types package makes every service update together, which undoes independent deploys.
Bundle size and runtime cost
Say what types cost at runtimeNothing, but enums and decorators emit code
Import one lodash function
import debounce from "lodash/debounce" Load a feature on demand
React.lazy(() => import("./Chart")) TrapNamed imports from lodash still pull in its one CommonJS file. Use lodash-es or per-method paths.
Design patterns
Allow only one instance
private constructor()Plus a static getInstanceInject dependenciesInterface-typed constructor parameters
Type a builder chain exactlyEach call returns a wider builder type
Allow a call in one state
this: Req<"idle">A phantom type parameterChain steps that may be emptyAn
Option type with map, flatMapTrapA DI container can't find a dependency by its interface, because interfaces vanish at runtime. It maps tokens instead.
Asked in interviews
AskedHow do you implement design patterns with TypeScript?Nothing matches. Try a shorter word, or clear the search.
Found this useful? Pass it on.
Pro · $10/mo
This sheet stays free. With Pro, you can:
- Every answer on this sheet. Read the full answer to all 102 questions it links, not just the 16 free ones.
- My sheet. The cards you star and the ones you miss in Quiz me, from every sheet, on one page to quiz and print.
- PDFs. Download this sheet and My sheet, laid out for A4, with every question a link to its answer.
- The rest of Pro. Every answer in the question library, and 1,000 AI credits a month.