React with TypeScript

A cart line that TypeScript checks

In a React project that uses TypeScript, components live in .tsx files: TypeScript with JSX. You give each component's props a type, and TypeScript checks every place the component is used. Here is a small cart. Its result is live under the code, and the list under the code is what the real TypeScript compiler says about it.

1type CartLineProps = {2  name: string;3  price: number;4};5 6function CartLine({ name, price }: CartLineProps) {7  return (8    <li>9      {name}: ${price + 2} with delivery10    </li>11  );12}13 14export default function App() {15  return (16    <ul>17      <CartLine name="Tea" price={3} />18      <CartLine name="Cake" price="4" />19    </ul>20  );21}

Lines 1 to 4 describe the props: name is a string and price is a number. Line 6 writes : CartLineProps after the props, so TypeScript knows what CartLine gets. Line 9 shows the price plus $2 for delivery. Line 17 passes the number 3, in braces. Line 18 passes "4" in quotes, which is text, and TypeScript marks it, on purpose here:

• Type 'string' is not assignable to type 'number' means "you're passing text where CartLineProps says a number goes".

Now read the result: Tea: $5 with delivery, and Cake: $42 with delivery. The page still runs. Before the code runs, the types are removed, and "4" + 2 joins two pieces of text into "42". TypeScript doesn't change the page; it tells you about the bug before a customer sees it. Press Edit & run and change line 18 to price={4}: the Cake line says $6. (The lesson's editor shows the result as you type but doesn't check types; the list under the lesson's code does, and so does your editor in a project.)

This lesson shows the React side: the project, React 19's types, and the patterns React code uses. The TypeScript course goes deeper into two parts of it: Typing React components (props, children, events, optional props) and Typing state and hooks (useState, useReducer, useRef, context, and your own hooks).

TypeScript in a Vite React project

Vite has a template for React with TypeScript called react-ts. Setting up a React project used the react template; with TypeScript, only the template's name changes:

npm create vite@latest shop -- --template react-ts
cd shop
npm install
npm run dev

Line 1 makes a folder called shop from the react-ts template. Lines 2 to 4 go into it, install the packages, and start the dev server, as for a JavaScript project. The new project has a few files the JavaScript one doesn't:

shop/
├── index.html
├── package.json
├── tsconfig.json         (points at the two files below)
├── tsconfig.app.json     (settings for your code in src)
├── tsconfig.node.json    (settings for vite.config.ts)
├── vite.config.ts
└── src/
    ├── App.tsx
    ├── main.tsx
    └── index.css

Your components end in .tsx (lines 9 and 10). There are three TypeScript settings files, because two kinds of code live in the project. tsconfig.app.json (line 5) is for your app in src, which runs in the browser. tsconfig.node.json (line 6) is for vite.config.ts, which runs in Node.js. tsconfig.json (line 4) only points at the other two. Here are the settings for your app:

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "es2023",
    "lib": ["ES2023", "DOM"],
    "module": "esnext",
    "types": ["vite/client"],
    "allowArbitraryExtensions": true,
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

The lines that matter most for React code:

• Line 5, "lib": ["ES2023", "DOM"], gives TypeScript the browser's types, like HTMLInputElement. Line 7 adds the types for Vite's extras, like import.meta.env.
• Line 13, allowImportingTsExtensions, lets you import "./App.tsx" with its extension. Line 14, verbatimModuleSyntax, wants imports of types marked import type (or type inside the braces), so the tools can remove them safely. That's why this lesson's examples write import type { ReactNode }.
• Line 16, noEmit: TypeScript only checks and writes no files. Vite makes the JavaScript.
• Line 17, "jsx": "react-jsx": JSX turns into calls to React's JSX functions, which are imported for you. You don't import React to write JSX.
• Line 22, erasableSyntaxOnly, allows only TypeScript that can simply be deleted, like types. It rejects enums, which turn into real code.

There is no strict line. The template installs TypeScript 6.0 (create-vite 9.3.1, checked in October 2026), and since 6.0 strict checks are on unless a project turns them off; older templates wrote "strict": true. tsconfig and strictness explains each strict check. The scripts in package.json show who checks the types:

"scripts": {
  "dev": "vite",
  "build": "tsc -b && vite build",
  "lint": "oxlint",
  "preview": "vite preview"
}

Line 2, vite, starts the dev server. It removes the types from each file and runs the rest, without checking them. Line 3 builds for release: tsc -b checks every file first, and the && means vite build only runs if there were no errors. How to read the table: each row is a command, whether it checks types, and what it does.

The entry file is the JavaScript template's, with one extra character:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Line 6 ends document.getElementById('root') with !. getElementById can return null, and createRoot needs an element. The ! tells TypeScript "this one is never null", which is true because index.html has <div id="root">. (Type assertions explains !.) Line 4 imports ./App.tsx with its extension, which line 13 of the settings allows.

To add TypeScript to a Vite project that started in JavaScript, install the compiler and React's types:

npm install --save-dev typescript @types/react @types/react-dom
npx tsc -b

Line 1 installs typescript and the type packages for react and react-dom. Keep @types/react on the same major version as React: 19 for React 19. Then copy the three tsconfig files from a new react-ts project, add tsc -b && to the build script, and rename files from .jsx to .tsx one at a time. Line 2 checks them. Migrating to TypeScript shows how to move a project a file at a time.

Props and children with React 19's types

Props types work as the overview showed: an object type, written after the props. Content between a component's tags arrives as the children prop, and its type is ReactNode: anything React can show.

1import type { ReactNode } from "react";2 3type PanelProps = {4  title: string;5  children: ReactNode;6};7 8function Panel({ title, children }: PanelProps) {9  return (10    <section>11      <h2>{title}</h2>12      {children}13    </section>14  );15}16 17export default function App() {18  return (19    <Panel title="Your cart">20      <p>2 items, $7</p>21      <button>Checkout</button>22    </Panel>23  );24}

Line 1 imports the ReactNode type, with import type. Line 5 says children can be anything React shows: elements, text, numbers, lists of them, or nothing (null). Line 8 takes title and children out of the props. Line 12 puts the children where they belong. Lines 20 and 21, a paragraph and a button, are the children. The result shows the heading, then both.

Notice what isn't there: a return type. TypeScript works out what Panel returns, and checks at each tag that React can show it. You may meet React.FC<PanelProps> in other code. It works too, but adds nothing here, and it hasn't added children by itself since version 18 of React's types. Typing React components compares ReactNode, ReactElement, and PropsWithChildren.

Older code and tutorials often write the return type as JSX.Element. React 19's types removed the global JSX, so that line is now an error (on purpose here):

1function Price({ amount }: { amount: number }): JSX.Element {2  return <strong>${amount}</strong>;3}4 5export default function App() {6  return <Price amount={3} />;7}

• Cannot find namespace 'JSX' means "there is no JSX anywhere this file can see". The result still shows $3, because types never change what runs.

JSX now lives inside React, so other tools' JSX types can't clash with React's. Import it, write React.JSX.Element, or leave the return type off:

1import type { JSX } from "react";2 3function Price({ amount }: { amount: number }): JSX.Element {4  return <strong>${amount}</strong>;5}6 7export default function App() {8  return <Price amount={3} />;9}

Line 1 imports the type JSX from react, and line 3 uses it. No errors. The same move fixes custom element types: older code added them to the global JSX, and React 19 code adds them inside declare module "react" (Globals and module augmentation shows how).

Events, refs, and ref as a prop

An inline handler, like onChange={(event) => …} on an <input>, gets its event type from the element. A handler written as its own function needs the type written out. Refs need the type of the element they will hold. And in React 19, a component receives a ref like any other prop. This search box does all three:

1import { useRef, useState, type ChangeEvent, type Ref } from "react";2 3type SearchInputProps = {4  value: string;5  onChange: (event: ChangeEvent<HTMLInputElement>) => void;6  ref?: Ref<HTMLInputElement>;7};8 9function SearchInput({ value, onChange, ref }: SearchInputProps) {10  return <input ref={ref} value={value} onChange={onChange} placeholder="Search products" />;11}12 13export default function App() {14  const [query, setQuery] = useState("");15  const inputRef = useRef<HTMLInputElement>(null);16  //    ^?17 18  function handleChange(event: ChangeEvent<HTMLInputElement>) {19    setQuery(event.target.value);20  }21 22  return (23    <>24      <SearchInput ref={inputRef} value={query} onChange={handleChange} />25      <button onClick={() => inputRef.current?.focus()}>Focus search</button>26      <p>Searching for: {query || "nothing yet"}</p>27    </>28  );29}

Line by line:

• Lines 3 to 7 are SearchInput's props. Line 5 types onChange as a function that takes a ChangeEvent<HTMLInputElement>: a change event from an input. Line 6 is the ref: Ref<HTMLInputElement>, optional, because a parent may not pass one.
• Line 9 takes ref out of the props like any other prop, and line 10 puts it on the <input>.
• Line 15 makes the ref, with null as its start. The query on line 16 shows its type, RefObject<HTMLInputElement | null>: it holds the input, or null before React attaches it.
• Lines 18 to 20 are a named handler, so line 18 writes the event's type. event.target is then an HTMLInputElement, with a value string.
• Line 24 passes the ref down. Line 25 focuses the input on click; ?. skips the call while current is null.

Type in the box: the sentence follows. Click elsewhere, then press Focus search: the cursor jumps into the box, because inputRef.current is the real input.

Before React 19, React kept ref out of a component's props. To pass one through, you wrapped the component in forwardRef. You'll still find it in older code; it works in React 19, and React plans to deprecate it:

import { forwardRef, type ChangeEvent } from "react";

type SearchInputProps = {
  value: string;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
};

const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
  function SearchInput({ value, onChange }, ref) {
    return <input ref={ref} value={value} onChange={onChange} placeholder="Search products" />;
  },
);

Line 8 wraps the component, with the element type first and the props second; note the order is the reverse of the call's arguments. The ref arrives as a separate second argument on line 9. With React 19 you delete the wrapper and add ref to the props, as searchBox does.

Two more changes in React 19's ref types:

• useRef needs a starting value: useRef<number>() is an error, so write useRef<number | undefined>(undefined). Every ref's current can be changed by your code; older types made some read-only.
• A ref callback, ref={(node) => …}, may return a cleanup function, so it must return nothing else. Manipulating the DOM with refs covers ref callbacks, and the errors playground below shows the mistake.

Typing events lists the DOM's event types, and Typing state and hooks covers useRef for values as well as elements.

Wrapping a native element with ComponentProps

Apps are full of components that wrap one element: a Button around <button>, a TextField around <input>. Your wrapper should accept everything the element accepts, like onClick, disabled, type and aria-label, without listing them all. ComponentProps<"button"> is that list: the type of a <button>'s props.

1import { useState, type ComponentProps } from "react";2 3type ButtonProps = ComponentProps<"button"> & {4  variant?: "primary" | "ghost";5};6 7function Button({ variant = "primary", className = "", ...rest }: ButtonProps) {8  return <button className={`btn ${variant} ${className}`} {...rest} />;9}10 11export default function App() {12  const [added, setAdded] = useState(0);13 14  return (15    <>16      <Button onClick={() => setAdded(added + 1)}>Add to cart</Button>17      <Button variant="ghost" type="button" disabled>18        Save for later19      </Button>20      <Button variant="danger">Remove</Button>21      <p>Added {added} times</p>22    </>23  );24}

• Lines 3 to 5 make ButtonProps: every <button> prop, joined with & to one of your own, variant (Intersection types explains &).
• Line 7 takes out variant and className, with defaults. ...rest collects every other prop (Spread and rest).
• Line 8 builds the class name and spreads rest onto the real <button>, so onClick, type, disabled and the children all reach it.
• Lines 16 and 17 use onClick, type and disabled, which ButtonProps never names. TypeScript accepts them because ComponentProps<"button"> has them.
• Line 20 passes variant="danger", and TypeScript marks it, on purpose here: Type '"danger"' is not assignable to type '"primary" | "ghost" | undefined' means only those two words, or nothing, may go there.

Press Add to cart: the count goes up, because onClick travelled through rest. The styles are in the styles.css tab.

ComponentProps<"button"> includes ref. In React 19 a ref is an ordinary prop of your component, so the spread on line 8 passes it to the <button> too, with no extra code. When a wrapper shouldn't accept a ref, use ComponentPropsWithoutRef:

1import type { ComponentProps, ComponentPropsWithoutRef } from "react";2 3type WithRef = ComponentProps<"button">["ref"];4//   ^?5type WithoutRef = ComponentPropsWithoutRef<"button">;6 7const props: WithoutRef = { type: "button", disabled: true };8 9export default function App() {10  return <button {...props}>Save for later</button>;11}

The query on line 4 shows that ComponentProps<"button">["ref"] is Ref<HTMLButtonElement> | undefined. Line 5 makes the same props without ref, and line 7 uses them for a plain object that line 10 spreads onto a button. To copy another component's props instead of an element's, write ComponentProps<typeof Button>.

Reducers and context the React 19 way

useState, useReducer and context work as Typing state and hooks shows. Two of them read a little differently with React 19's types. Here is a cart in context, changed by a reducer:

1import { createContext, useContext, useReducer, type ReactNode } from "react";2 3type Item = { name: string; price: number };4type CartAction = { type: "add"; item: Item } | { type: "clear" };5 6function cartReducer(items: Item[], action: CartAction): Item[] {7  switch (action.type) {8    case "add":9      return [...items, action.item];10    case "clear":11      return [];12  }13}14 15type CartValue = { items: Item[]; dispatch: (action: CartAction) => void };16const CartContext = createContext<CartValue | null>(null);17 18function useCart() {19  const cart = useContext(CartContext);20  if (!cart) throw new Error("useCart must be used inside CartProvider");21  return cart;22}23 24function CartProvider({ children }: { children: ReactNode }) {25  const [items, dispatch] = useReducer(cartReducer, []);26  return <CartContext value={{ items, dispatch }}>{children}</CartContext>;27}28 29function AddTea() {30  const { dispatch } = useCart();31  const tea = { name: "Tea", price: 3 };32  return <button onClick={() => dispatch({ type: "add", item: tea })}>Add tea</button>;33}34 35function CartTotal() {36  const { items, dispatch } = useCart();37  const total = items.reduce((sum, item) => sum + item.price, 0);38  return (39    <p>40      {items.length} items, ${total} <button onClick={() => dispatch({ type: "clear" })}>Clear</button>41    </p>42  );43}44 45export default function App() {46  return (47    <CartProvider>48      <AddTea />49      <CartTotal />50    </CartProvider>51  );52}

• Line 4 lists every action as a union, one shape per type (a discriminated union). Line 6 types the reducer's state, action, and result. Inside case "add", line 9 can read action.item, because only that action has one.
• Line 25 calls useReducer(cartReducer, []) with no type arguments. React 19's types read the state and action types from cartReducer. Older code wrote useReducer<Reducer<State, Action>>(…), which React 19's types no longer accept.
• Line 16 creates the context with null as its default, so its type is CartValue | null. Lines 18 to 22 are a small hook that throws if there's no provider; after line 20, TypeScript knows cart isn't null, so every component that calls useCart() gets a CartValue.
• Line 26 renders <CartContext value={…}>: in React 19 the context itself is the provider. <CartContext.Provider> still works, and React plans to deprecate it.

Press Add tea twice: 2 items, $6. Clear sends the other action. How to read the table: each row is something you do in React code, how older code wrote it, and how it reads with React 19's types.

Extracting state logic into a reducer and Scaling up with reducer and context teach the patterns themselves.

Generic components

A component can be generic, like a generic function. A List<T> shows any kind of item, and TypeScript works out T from the items you pass, so the functions you give it know the item's type:

1import type { ReactNode } from "react";2 3type ListProps<T> = {4  items: T[];5  getKey: (item: T) => string;6  renderItem: (item: T) => ReactNode;7};8 9function List<T>({ items, getKey, renderItem }: ListProps<T>) {10  return (11    <ul>12      {items.map((item) => (13        <li key={getKey(item)}>{renderItem(item)}</li>14      ))}15    </ul>16  );17}18 19const products = [20  { id: "tea", name: "Tea", price: 3 },21  { id: "cake", name: "Cake", price: 4 },22];23const reviews = [{ email: "asha@example.com", stars: 5 }];24 25export default function App() {26  return (27    <>28      <List29        items={products}30        getKey={(product) => product.id}31        renderItem={(product) => `${product.name}: $${product.price}`}32        //            ^?33      />34      <List items={reviews} getKey={(review) => review.email} renderItem={(review) => `${review.stars} stars`} />35    </>36  );37}

• Lines 3 to 7 describe the props in terms of T: an array of T, a function that gives each T a key, and one that shows a T.
• Line 9, function List<T>, makes T a type parameter. List never looks inside an item; it only passes items to getKey and renderItem on line 13.
• Lines 28 to 33 use List with products. TypeScript decides T is the product type, and the query on line 32 shows product has id, name and price.
• Line 34 uses the same List with reviews: there, T is the review type.

The type flows all the way. Read a property products don't have, and TypeScript marks it (on purpose here):

1import type { ReactNode } from "react";2 3type ListProps<T> = {4  items: T[];5  getKey: (item: T) => string;6  renderItem: (item: T) => ReactNode;7};8 9function List<T>({ items, getKey, renderItem }: ListProps<T>) {10  return (11    <ul>12      {items.map((item) => (13        <li key={getKey(item)}>{renderItem(item)}</li>14      ))}15    </ul>16  );17}18 19const products = [20  { id: "tea", name: "Tea", price: 3 },21  { id: "cake", name: "Cake", price: 4 },22];23const reviews = [{ email: "asha@example.com", stars: 5 }];24 25export default function App() {26  return (27    <>28      <List29        items={products}30        getKey={(product) => product.id}31        renderItem={(product) => product.title}32        //            ^?33      />34      <List items={reviews} getKey={(review) => review.email} renderItem={(review) => `${review.stars} stars`} />35    </>36  );37}

• Property 'title' does not exist on type '{ id: string; name: string; price: number; }' on line 31: products have no title. In the result, the first list's two items are empty, because product.title is undefined.

With an arrow function, a .tsx file reads <T> as the start of a JSX tag. Write <T,> instead; the comma tells TypeScript it's a type parameter:

const List = <T,>({ items, getKey, renderItem }: ListProps<T>) => (
  <ul>
    {items.map((item) => (
      <li key={getKey(item)}>{renderItem(item)}</li>
    ))}
  </ul>
);

Line 1 is the only difference from function List<T>. Generics in practice shows more generic patterns.

Common errors and how to fix them

These six errors come up in almost every React project with TypeScript. Pick one, read the message and why it happens, then press Fixed to see the line that fixes it. Each time, the real compiler checks the code with React's types.

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([]);5  return <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>;6}

How to read the table: each row is a message TypeScript prints, what it means in plain words, and the fix. Keep it for when you meet one in your own project.

Long messages read from the top: the first line says what went wrong, and the lines under it say why. Reading type errors walks through longer ones.

A product search, typed end to end

Here are the pieces together, split into files the way a project splits them. Click the tabs to read SearchInput.tsx, Button.tsx and List.tsx.

1import { useRef, useState } from "react";2import Button from "./Button.tsx";3import List from "./List.tsx";4import SearchInput from "./SearchInput.tsx";5 6type Product = { id: string; name: string; price: number };7 8const products: Product[] = [9  { id: "tea", name: "Green tea", price: 3 },10  { id: "cake", name: "Carrot cake", price: 4 },11  { id: "lemonade", name: "Lemonade", price: 2 },12];13 14export default function App() {15  const [query, setQuery] = useState("");16  const inputRef = useRef<HTMLInputElement>(null);17  const shown = products.filter((product) => product.name.toLowerCase().includes(query.toLowerCase()));18 19  function clear() {20    setQuery("");21    inputRef.current?.focus();22  }23 24  return (25    <>26      <SearchInput ref={inputRef} value={query} onChange={(event) => setQuery(event.target.value)} />27      <Button variant="ghost" onClick={clear}>28        Clear29      </Button>30      <List items={shown} getKey={(product) => product.id} renderItem={(product) => `${product.name}: $${product.price}`} />31    </>32  );33}

• SearchInput.tsx takes ComponentProps<"input"> and spreads it onto an <input>. It never mentions ref, yet line 26 of App.tsx passes one and it arrives: in React 19, ref is one of the props the spread passes on.
• On line 26 the inline onChange gets its event type from SearchInput's props, so event.target.value is a string with no type written.
• Line 27 uses Button from Button.tsx, the wrapper from earlier, with variant="ghost".
• Line 30 uses the generic List from List.tsx. T is Product (line 6), so product.price is a number.

Type ca in the search box: only Carrot cake stays. Press Clear: the box empties and gets the focus, through the ref. Type xyz: No products match.

Common mix-ups

• "The dev server stops me if my types are wrong." No. npm run dev removes the types without checking them. Your editor and tsc -b, which npm run build runs first, do the checking.
• "Types check my props while the app runs." No. Types are gone before the code runs. Data from outside, like a server's answer, still needs checking with code.
• "I need forwardRef to pass a ref to my component." No, not in React 19. Add ref to the props and put it on the element.
• "Every component needs React.FC or a JSX.Element return type." No. A plain function with typed props is enough, and TypeScript works out the return type. JSX.Element isn't even global any more.
• "useRef<HTMLInputElement>(null) gives a ref I can't change." No. In React 19's types, every RefObject's current can be changed.
• "useReducer needs type arguments." No. Type the reducer's parameters, and useReducer reads the types from it.

Practice exercises

Each exercise shows its result under the code, and the list of TypeScript errors under the starter. Press Edit & run to change the code: the result updates as you type. Check your types with the solution's list, or in a project of your own.

1type BadgeProps = {2  name: string;3  inStock: boolean;4};5 6function StockBadge({ name, inStock }: BadgeProps) {7  return <p>{name}: {inStock ? "in stock" : "sold out"}</p>;8}9 10export default function App() {11  return (12    <>13      <StockBadge name="Tea" inStock={true} />14      <StockBadge name="Cake" inStock="no" />15    </>16  );17}

1type BadgeProps = {2  name: string;3  inStock: boolean;4};5 6function StockBadge({ name, inStock }: BadgeProps) {7  return <p>{name}: {inStock ? "in stock" : "sold out"}</p>;8}9 10export default function App() {11  return (12    <>13      <StockBadge name="Tea" inStock={true} />14      <StockBadge name="Cake" inStock={false} />15    </>16  );17}

1function ProductBadge({ name, price }) {2  return (3    <span>4      {name}: ${price}5    </span>6  );7}8 9export default function App() {10  return <ProductBadge name="Tea" price={3} />;11}

1type ProductBadgeProps = {2  name: string;3  price: number;4};5 6function ProductBadge({ name, price }: ProductBadgeProps) {7  return (8    <span>9      {name}: ${price}10    </span>11  );12}13 14export default function App() {15  return <ProductBadge name="Tea" price={3} />;16}

1import { useRef } from "react";2 3type SearchInputProps = {4  placeholder: string;5};6 7function SearchInput({ placeholder }: SearchInputProps) {8  return <input placeholder={placeholder} />;9}10 11export default function App() {12  const inputRef = useRef<HTMLInputElement>(null);13  return (14    <>15      <SearchInput ref={inputRef} placeholder="Search products" />16      <button onClick={() => inputRef.current?.focus()}>Focus search</button>17    </>18  );19}

1import { useRef, type Ref } from "react";2 3type SearchInputProps = {4  placeholder: string;5  ref?: Ref<HTMLInputElement>;6};7 8function SearchInput({ placeholder, ref }: SearchInputProps) {9  return <input ref={ref} placeholder={placeholder} />;10}11 12export default function App() {13  const inputRef = useRef<HTMLInputElement>(null);14  return (15    <>16      <SearchInput ref={inputRef} placeholder="Search products" />17      <button onClick={() => inputRef.current?.focus()}>Focus search</button>18    </>19  );20}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([]);5 6  return (7    <>8      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>9      <p>10        {items.length} items: {items.join(", ")}11      </p>12    </>13  );14}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState<string[]>([]);5 6  return (7    <>8      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>9      <p>10        {items.length} items: {items.join(", ")}11      </p>12    </>13  );14}

1type TextFieldProps = {2  label: string;3};4 5function TextField({ label }: TextFieldProps) {6  return (7    <label>8      {label} <input />9    </label>10  );11}12 13export default function App() {14  return <TextField label="Email" type="email" placeholder="asha@example.com" required />;15}

1import type { ComponentProps } from "react";2 3type TextFieldProps = ComponentProps<"input"> & {4  label: string;5};6 7function TextField({ label, ...rest }: TextFieldProps) {8  return (9    <label>10      {label} <input {...rest} />11    </label>12  );13}14 15export default function App() {16  return <TextField label="Email" type="email" placeholder="asha@example.com" required />;17}

1import { useState } from "react";2 3type PickerProps = {4  options: unknown[];5  getLabel: (option: unknown) => string;6  onPick: (option: unknown) => void;7};8 9function Picker({ options, getLabel, onPick }: PickerProps) {10  return options.map((option) => (11    <button key={getLabel(option)} onClick={() => onPick(option)}>12      {getLabel(option)}13    </button>14  ));15}16 17type Product = { name: string; price: number };18const products: Product[] = [19  { name: "Tea", price: 3 },20  { name: "Cake", price: 4 },21];22 23export default function App() {24  const [picked, setPicked] = useState<Product | null>(null);25  return (26    <>27      <Picker options={products} getLabel={(product) => product.name} onPick={setPicked} />28      <p>{picked ? `You picked ${picked.name}: $${picked.price}` : "Pick a product"}</p>29    </>30  );31}

1import { useState } from "react";2 3type PickerProps<T> = {4  options: T[];5  getLabel: (option: T) => string;6  onPick: (option: T) => void;7};8 9function Picker<T>({ options, getLabel, onPick }: PickerProps<T>) {10  return options.map((option) => (11    <button key={getLabel(option)} onClick={() => onPick(option)}>12      {getLabel(option)}13    </button>14  ));15}16 17type Product = { name: string; price: number };18const products: Product[] = [19  { name: "Tea", price: 3 },20  { name: "Cake", price: 4 },21];22 23export default function App() {24  const [picked, setPicked] = useState<Product | null>(null);25  return (26    <>27      <Picker options={products} getLabel={(product) => product.name} onPick={setPicked} />28      <p>{picked ? `You picked ${picked.name}: $${picked.price}` : "Pick a product"}</p>29    </>30  );31}

Check your understanding

For code questions, find where each type comes from: a type you wrote, a starting value, or a prop TypeScript read first. Press Edit & run on a question's code to run it.

Key takeaways

• Start with npm create vite@latest -- --template react-ts. Vite removes types without checking them; your editor and tsc -b (run first by npm run build) check them.
• Type props with an object type after the props, children as ReactNode, and let TypeScript work out return types. JSX lives in React now: React.JSX.Element.
• In React 19 a ref is a prop: ref?: Ref<HTMLInputElement>, no forwardRef. useRef needs a starting value, and useRef<T>(null) holds T | null.
• Wrap native elements with ComponentProps<"button"> and spread the rest; it includes ref. Use ComponentPropsWithoutRef when it shouldn't.
• Type the reducer, not useReducer. Create context with null, remove it with a hook that throws, and provide it with <Context value>.
• Generic components, function List<T>, carry the item type from one prop to the others.

Coming next: Rendering strategies. It starts the React on the server stage: where your components render (in the browser, on a server, or at build time) and what each choice costs.