Stop 07 · TypeScriptTopics · 12/12

React + TS

In short

React and TypeScript are a very common pair in real projects. Typed props mean your editor tells you when you forget a prop or pass the wrong thing, before the page even loads.

Typing React specifically — component props, state, event handlers, refs and hooks — using TypeScript to catch prop mismatches before runtime.

The jaadu mascot reads a menu card with paneer tikka and chilli options while a waiter waits.

Think of it like this

Ordering from a restaurant menu card

The menu says 'Paneer tikka, choose: mild or spicy'. You can't order 'extra crunchy'. Typed props are a component's menu card: exactly which props it accepts and what values are allowed, so wrong orders get rejected early.

Watch it happen

TypeScript checks a component call

Parent

TypeScript

Card

1/5The parent renders Card with one prop. TypeScript compares it with CardProps.

The big ideas

What you need to know

Type your props

Write a type for props and use it in the function parameter. Missing or wrong props become errors.

useState with a type

useState<User | null>(null) tells React the state starts empty but will hold a User later.

Event types

React.ChangeEvent<HTMLInputElement> types an input's onChange, so e.target.value is known to be a string.

children is ReactNode

For components that wrap content, type children as React.ReactNode.

See it in code

Walk through the code

tsx

1import { useState, type ReactNode, type ChangeEvent } from "react";2 3type CardProps = {4  title: string;5  variant?: "primary" | "ghost";6  children: ReactNode;7};8 9export function Card({ title, variant = "primary", children }: CardProps) {10  const [query, setQuery] = useState("");11  const onChange = (e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value);12 13  return (14    <section className={variant}><h2>{title}</h2><input value={query} onChange={onChange} />{children}</section>15  );16}

1/4Import the hook, plus two types. type tells the bundler these are types only.

Try <Card variant="big" /> and you get two errors: "big" isn't allowed, and title and children are missing.

Save yourself the pain

Common mistakes

Oops

Typing props as any to get the component working quickly.

Do this instead

Write a small props type. It takes a minute and catches bugs every time someone uses the component.

Oops

Writing useState(null) for data that arrives later.

Do this instead

TypeScript then thinks it's always null. Write useState<User | null>(null).

Your mission

Type a small component set

~30 min

Quick check

const [user, setUser] = useState(null); Why is this a problem in TypeScript?

Go deeper

1Convert one existing React component to TypeScript, typing its props.
2Learn how to type `useState`, `useRef` and event handlers correctly.
3Use `React.FC` sparingly — many teams now prefer typing props directly.