Chapter 9: Using TypeScript

Core Idea

TypeScript adds type safety to React components and Hooks primarily through inference — most component and Hook code needs little to no extra type annotation beyond installing @types/react and @types/react-dom and typing what can't be inferred (props, refs, complex event handlers).

Key Concepts

• Installation: framework-based apps (Next.js, React Router, etc.) generally ship TypeScript support out of the box; a from-scratch Vite/build-tool setup needs @types/react and @types/react-dom added as dev dependencies alongside typescript itself.
• Typing components: a function component's props are typed as a plain object type/interface on the destructured parameter — function Avatar({ person, size }: { person: Person; size: number }) — no special "FC" wrapper type is recommended; a plain typed function is preferred.
• Typing common Hooks:
  • useState<T>(): usually inferred from the initial value; an explicit type argument is needed mainly when the initial value doesn't fully describe the type (e.g. useState<Status | null>(null)).
  • useReducer: benefits from explicitly typing the action union so the reducer's switch is exhaustively checked.
  • useContext: typed by the type parameter given to createContext<T>().
  • useRef: typing depends on whether the ref is DOM-attached (useRef<HTMLInputElement>(null)) or holds a mutable value.
  • Custom Hooks should have their parameter and return types annotated explicitly, since inference across a Hook boundary is often less precise than within one component.
• Useful built-in utility types: React.ReactNode (anything renderable, including children), React.CSSProperties (the style prop's object shape), React.ComponentProps<typeof SomeComponent> (extract another component's prop types instead of redeclaring them), and DOM event types like React.MouseEvent<HTMLButtonElement> for handler parameters.
• This is a reference page, not a TypeScript tutorial — the docs explicitly point elsewhere (the TypeScript Handbook, type-challenges) to actually learn the language; this chapter is about the React-specific typing surface only.

Code Examples

function Avatar({ person, size }: { person: Person; size: number }) {
  return <img className="avatar" src={getImageUrl(person)} width={size} height={size} />;
}

• What it demonstrates: the idiomatic way to type props — an inline (or extracted) object type on the destructured parameter, no React.FC wrapper.

Key Takeaways

1. Prefer inference where it works (useState(0) infers number) and only add explicit generics where the initial value under-specifies the type (nullable state, union types).
2. React.ComponentProps<typeof Component> avoids duplicating another component's prop shape when writing a thin wrapper around it.
3. This chapter assumes TypeScript literacy — go here for the React typing surface, not to learn TypeScript itself.

Connects To

• Ch 21 (State: A Component's Memory): the useState calls this chapter shows how to type.
• Ch 62 (useRef): the DOM-ref vs. mutable-value typing distinction referenced here.