Command Palette

Search for a command to run...

Hectal
Phase 14Intermediate15 of 18 in TypeScript

TypeScript with React

Type props, children, state, refs, reducers, events, forms, context, custom hooks, generic and polymorphic components, and the patterns that make React code safe.

You already know React from the React course: components, props, state, effects. This phase does not teach React again. It teaches how to describe it with types, so the compiler checks every prop you pass, every event you handle and every piece of state you keep.

You'll learn the types React ships (ReactNode, ComponentProps, ChangeEvent, RefObject, Dispatch), how TypeScript infers state, and how to write your own: props with variants, reducers with discriminated unions, context with a guard hook, generic lists and selects, and a polymorphic component.

Every example runs real React 19 and is type-checked against @types/react 19.3 by the real compiler in your browser. The Types panel shows what tsc says, the Console shows what the page does.

0/6 · 0%
6 topics ~2 h 20 code blocks & diagrams
Start with the first topic
1
14.1

Typing Components and Props

A component is a function that receives one object of props. Give that object a type and the compiler checks every place the component is used: missing props, wrong values and misspelt names become red errors.

22 min 3 code practice

2
14.2

Typing State, Refs and Reducers

useState works out its type from the first value, which is right for numbers and wrong for "not loaded yet" or "one of a few words"; there you write the type yourself. Refs come in two kinds, and reducers get their safety from a union of actions.

23 min 4 code practice

3
14.3

Typing Event Handlers and Forms

React wraps browser events in its own event types, with the element baked in: ChangeEvent<HTMLInputElement>, MouseEvent<HTMLButtonElement>, SubmitEvent<HTMLFormElement>. Pick the right one and event.target.value is typed; pick the wrong one and the compiler tells you.

24 min 3 code practice

4
14.4

Typing Context and Custom Hooks

Context hands a value to every component below a provider, and the honest type of its default is T | null. A small guard hook removes the null for everyone else. Custom hooks need as const to return tuples and a type parameter to work for any value.

23 min 3 code practice

5
14.5

Generic and Polymorphic Components

A generic component takes a type parameter so one List or Select works for products, users or sizes and keeps the exact type in its callbacks. A polymorphic component takes an as prop and borrows the props of whatever element it becomes.

25 min 4 code practice

6
14.6

React + TypeScript Patterns

The patterns that make React code hard to misuse: props that are a union so impossible combinations don't compile, variants checked for completeness, a Remote<T> type for loading/error/success, validation where server data enters, and React 19's ref as a normal prop.

25 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Type the props of a Badge

The Badge component below is half done. Fill in BadgeProps so that label is required text and tone is optional and can only be "info", "warn" or "error".

Beginner
2

A counter reducer with typed actions

Make Action a discriminated union with four members: increment, decrement, reset and add, where only add carries an amount: number. Then write the reducer with a switch and finish it with default: return assertNever(action);.

Intermediate
3

A typed sign-up form

Finish the profile form. Write parseProfile(form: FormData): Profile | null: it reads the fields name and age, returns null if the name is empty (after trimming) or the age is missing or not a number, and otherwise a Profile.

Intermediate
4

A cart context with a guard hook

Two components read a shared cart count. Make the context hold CartValue | null, then make useCart() return a CartValue (never null) and throw an Error when it is used outside <CartProvider>.

Intermediate
5

A generic List<T>

The List component takes unknown items, so App can't read p.id or p.name in its callbacks. Make ListProps and List generic over T so getKey and renderItem receive the same type as items.

Intermediate
6

Loading, error and success as one type

Replace the loose Remote<T> with a discriminated union: { status: "loading" }, { status: "error"; message: string } and { status: "success"; data: T }.

Advanced