TypeScript for the Web

Airbnb post-mortems found 38% of production bugs would have been caught by TypeScript. The question is how to use it effectively, not just rename .js files to .ts.

• VS Code is built with TypeScript and uses its own type declarations to provide IntelliSense for JavaScript developers editing plain .js files.
• Stripe ships .d.ts files generated from their OpenAPI spec with every API version - TypeScript users catch breaking changes at compile time.
• Vercel auto-generates TypeScript types from Next.js 14+ route files, making route-parameter typos compile errors rather than production 404s.

Strict Mode

TypeScript strict flag enables a bundle of checks: strictNullChecks, noImplicitAny, strictFunctionTypes, strictPropertyInitialization. Without strictNullChecks, null and undefined are valid values for every type. That omission is responsible for most TypeScript projects that still crash with Cannot read properties of undefined.

VS Code and the TypeScript compiler itself run with strict: true. The TypeScript team recommendation since 2020: enable strict from day one. Retrofitting strict on a large codebase is far more expensive than starting with it.

Generics

Generics let functions, classes, and interfaces work over a range of types while preserving type information. Without generics a function that returns its input must use any (losing safety) or write overloads for every type (losing reusability). A generic type parameter is a variable at the type level: function identity<T>(x: T): T says whatever type comes in is the type that comes out.

Generic React components are the standard pattern for design system libraries - a typed Select<T>, Table<T>, or Modal<T> component prevents wrong option types at compile time rather than at user click time.

Utility Types

TypeScript ships a library of generic utility types that transform existing types without redefining them. They are built with mapped types and conditional types - the same primitives available to any TypeScript developer. Learning them removes the need to maintain redundant type definitions across a codebase.

In large React codebases, Pick and Omit prevent defining separate but nearly identical types for list views vs detail views vs API responses. One canonical type with strategic picks and omits keeps the type system as the single source of truth.

Declaration Files

Declaration files (.d.ts) contain only type information - no JavaScript. They let TypeScript understand code written in plain JavaScript: npm packages, global browser APIs, environment variables. When importing a package, TypeScript looks for its declaration file in node_modules/@types/ - a community repository (DefinitelyTyped) with types for 8,000+ npm packages.

When @types/react or @types/jest are installed, TypeScript picks them up automatically. The types array in tsconfig restricts which @types packages are included - useful to prevent browser globals from appearing in a Node.js service type scope.

Key Ideas

• strict: true enables the checks that prevent runtime crashes; without strictNullChecks TypeScript provides false security
• Generics preserve types through transformations - reusable across types while keeping full type inference for callers
• Utility types (Partial, Pick, Omit, Record, ReturnType) derive types from existing ones - one source of truth
• Declaration files (.d.ts) let TypeScript understand npm packages, SVG imports, env variables, and untyped JavaScript

Related Topics

These topics form the surrounding ecosystem:

• Testing: Jest, Playwright — Typed test fixtures and mock objects are automatically validated against real interfaces
• State Management — Typed Redux slices and Zustand stores catch selector mistakes at compile time
• React: Fundamentals — Typed props, hooks, and ref objects are the baseline for any production React codebase

Вопросы для размышления

• TypeScript structural typing means two types with the same shape are interchangeable. When is this convenient - and when does it hide bugs that nominal typing would catch?
• Utility types like Partial<T> are built from mapped types. What real-world type transformation in a project could be expressed as a custom mapped type rather than a hand-written interface?
• Declaration files bridge typed and untyped code. What happens in a large codebase when a third-party package updates but its @types package lags behind?

Связанные уроки

• comp-01-intro