TypeScript + React

14 examples to get you started with TypeScript + React -- 9 basic and 5 intermediate.

Set up a TypeScript-powered React project with a well-configured tsconfig.json, understand how .tsx files work, and learn the core type annotations every React

Define clear, type-safe prop contracts for your React components using TypeScript interfaces and type aliases. Cover required props, optional props, children, a

Type your component state correctly with useState and useReducer. Handle simple values, complex objects, nullable state, and discriminated union reducers.

Type React event handlers correctly for clicks, form submissions, input changes, keyboard events, and custom event callbacks. Use React's synthetic event types

Type useRef correctly for DOM element references and mutable value containers. Understand the difference between read-only DOM refs and mutable refs, and when t

Create fully typed React contexts with createContext, typed providers, and type-safe useContext hooks. Handle the default value problem cleanly.

Build reusable, type-safe React components and hooks using TypeScript generics. Create components that work with any data type while preserving full type inform

Use discriminated union types to model component props that change shape based on a variant or status field. Achieve exhaustive pattern matching so TypeScript c

TypeScript utility types for React — Partial, Pick, Omit, Required, Readonly, ReturnType, and how to compose them in component props.

Type API responses safely in React — fetch result types, Zod parsing, error narrowing, generic helpers, and runtime validation patterns.

TypeScript patterns for React Server Components — async component types, params and searchParams, Server Action signatures, and async props.

Type Next.js App Router route handlers with NextRequest, NextResponse, and typed route parameters. Build type-safe API endpoints with proper request/response co

Write React code that thrives under TypeScript's strictest settings. Master patterns for strictNullChecks, noUncheckedIndexedAccess, and exactOptionalPropertyTy

TypeScript type narrowing in React — typeof, instanceof, in operator, discriminated unions, type predicates, and assertion functions.

TypeScript declaration files for React — d.ts authoring, module augmentation, global types, ambient declarations, and typing third-party JS libs.

A comprehensive reference for JavaScript/TypeScript regular expressions — syntax, flags, methods, and real-world patterns commonly used in React applications.

A condensed summary of the 25 most important best practices drawn from every page in this section.