Using React with TypeScript

Using TypeScript with React is like labeling every box in your move with exactly what's inside, so nobody accidentally opens the kitchen box expecting bathroom supplies.

In this page:

Typing Component Props
Typing useState
Typing Event Handlers

Syntax

markup

interface ComponentProps {
  name: string;
  count?: number;
}

function Component({ name, count = 0 }: ComponentProps) {
  const [value, setValue] = useState<string>("");
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value);
  return <input value={value} onChange={handleChange} />;
}

Typing Component Props

Defining an interface (or type alias) describing a component's expected props, then using it as the type for the props parameter, lets TypeScript catch mistakes like a missing required prop or a value of the wrong type at compile time, before the code ever runs.

Note: Name the props interface after the component with a Props suffix, like GreetingProps for a Greeting component.

Warning: Typing props as any (or skipping types entirely) gives up all of TypeScript's benefit for that component — it's essentially back to plain JavaScript.

Example: Typing Component Props

markup

// Run in your local React project (npm install required)
interface GreetingProps {
  name: string;
  age?: number; // optional
}
function Greeting({ name, age }: GreetingProps) {
  return <p>Hello, {name}{age ? ` (${age})` : ''}</p>;
}

Typing useState

TypeScript usually infers a useState hook's type automatically from its initial value, like useState(0) being inferred as number. When the initial value doesn't fully capture the intended type (like an empty array that will later hold strings), you specify the type explicitly with a generic.

Note: useState<string[]>([]) is a common pattern — TypeScript can't infer 'array of strings' from an empty array alone.

Warning: Without an explicit generic, useState([]) infers the type as never[], which then rejects any actual items you try to add later.

Example: Typing useState

markup

// Run in your local React project (npm install required)
function TodoList() {
  const [todos, setTodos] = useState<string[]>([]);
  const addTodo = (text: string) => setTodos([...todos, text]);
  return <button onClick={() => addTodo('New task')}>Add ({todos.length})</button>;
}

Typing Event Handlers

React's built-in TypeScript types include specific event types, like React.ChangeEvent<HTMLInputElement> for an input's onChange handler, giving you correct autocomplete and type-checking on properties like event.target.value.

Note: Let your editor's autocomplete suggest the exact event type for a given JSX event prop — you rarely need to memorize them all.

Warning: Using a generic any or the wrong specific event type (like using a button's event type on an input) can hide real type errors related to which properties actually exist on that event.

Example: Typing Event Handlers

markup

// Run in your local React project (npm install required)
function SearchBox() {
  const [query, setQuery] = useState('');
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };
  return <input value={query} onChange={handleChange} />;
}

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Introduction to Next.js (server-side React) Next Lesson → Scalable Folder Architecture

Using React with TypeScript

Typing Component Props

Typing useState

Typing Event Handlers

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code