TypeScript + React

What this module covers

4 steps · TypeScript

1. Step 1. TypeScript + React

   TypeScript enhances React with typed props, typed state, typed refs, and typed events. interface ButtonProps { label: string; onClick: () => void; variant?: "primary" | "secondary" | "danger"; disabled?: boolean; } function Button({ label, onClick, variant = "primary", disabled }: ButtonProps) { return <button onClick={onClick} disabled={disabled}>{label}</button>; } Typing events: import { ChangeEvent, FormEvent } from 'react'; const handleChange = (e: ChangeEvent<HTMLInputElement>) => console.log(e.target.value); const handleSubmit = (e: FormEvent<HTMLFormElement>) => e.preventDefault(); Best practices: always define an interface/type for props, prefer explicit generics for useState when null is possible, type refs with the specific HTML element, and mark optional props with ?.

   Typing event-handler props as `() => void` (or with a specific React event type) lets TypeScript catch a caller passing the wrong kind of function, before the component ever renders. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Add a typed onClick prop of type () => void to BadgeProps.

2. Step 2. Quiz: TypeScript + React

   Answer these questions about typing React components.

   Props are typed with an interface or type alias; React exports typed event types like ChangeEvent<T>. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Answer the quiz below.

3. Step 3. Typed React Component

   Define interface CardProps with title/description (string) and optional onClick. Create a Card component with internal counter state.

   This step combines everything from the lesson: a props interface with an optional callback, plus typed local state via useState. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does CardProps have title, description, and optional onClick, and does Card use useState?

4. Step 4. Mini project: TypeScript + React

   Define interface CardProps with title/description (string) and optional onClick. Create a Card component with internal counter state. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This step combines everything from the lesson: a props interface with an optional callback, plus typed local state via useState. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does CardProps have title, description, and optional onClick, and does Card use useState?