TypeScript · Lesson 7 of 7

TypeScript with React

Typing props, state, events and API data in React components.

In a React + TypeScript project, files use the .tsx extension. The main things to type:

Props — an interface or type for each component's props.
State — useState<Job[]>([]) when the initial value doesn't show the full type.
Events — for example React.ChangeEvent<HTMLInputElement>.
API data — type what fetch returns, and validate it if it comes from outside.

Create a project with npm create vite@latest my-app -- --template react-ts.

Example code

Try it in the TypeScript Playground or with tsc

// JobList.tsx
import { useState } from "react";

interface Job {
  id: number;
  title: string;
  city: string;
}

interface JobListProps {
  jobs: Job[];
  onSelect: (job: Job) => void;
}

export function JobList({ jobs, onSelect }: JobListProps) {
  const [query, setQuery] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };

  const shown = jobs.filter((j) => j.title.toLowerCase().includes(query.toLowerCase()));

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder="Search jobs" />
      <ul>
        {shown.map((j) => (
          <li key={j.id} onClick={() => onSelect(j)}>{j.title} – {j.city}</li>
        ))}
      </ul>
    </div>
  );
}

// <JobList jobs={data} />   → error: property 'onSelect' is missing

Compiler / program output

error TS2741: Property 'onSelect' is missing in type '{ jobs: Job[]; }' but required in type 'JobListProps'.

Paste the code into the official TypeScript Playground in your browser, or install TypeScript (npm install -D typescript) and run npx tsc --noEmit to type-check. Names are fictional.

Key points

Use .tsx files for React components.
Define a props interface for every component.
Type state when the initial value isn't enough: useState<Job[]>([]).
Type event handlers with React's event types.

Quick check

How do you type state that starts as an empty array of jobs?

useState([]) useState<Job[]>([]) useState<any>([]) useState(Job[])

Practice task

Build a typed Counter component with props initial: number and step?: number (default 1), and buttons to add and subtract.

Interview corner

How do you type props in a React component?

Define an interface or type for the props and annotate the component's parameter with it, for example function Card({ title }: CardProps). Optional props use ?, and callbacks are typed as function types.

Should you use React.FC?

It's optional. Many teams now type the props parameter directly instead, which is simpler and handles children explicitly. Either works; be consistent across the codebase.