In React with TypeScript you mostly type a component's props, and inference handles the rest. Describe props with an interface, use React.ReactNode for children, pass a type argument to useState when the start value is too narrow, and pick event types such as React.ChangeEvent<HTMLInputElement> for handlers. Files with JSX use the .tsx extension.
| Thing to type | Type |
|---|---|
| Anything renderable as children | React.ReactNode |
| Exactly one JSX element | React.ReactElement |
| Input change handler | React.ChangeEvent<HTMLInputElement> |
| Button click handler | React.MouseEvent<HTMLButtonElement> |
| Form submit handler | React.FormEvent<HTMLFormElement> |
| Inline style prop | React.CSSProperties |
| All props of a native element | React.ComponentProps<"button"> |
Updated
Search the cheat sheet for the thing you are trying to type, such as a click handler or a ref, and copy the line. Longer worked examples for context, reducers and generic components follow.
interface ButtonProps { label: string; disabled?: boolean }children: React.ReactNode;children: React.ReactElement;variant: "primary" | "ghost";type Props = React.ComponentProps<"button"> & { tone: "info" | "warn" };style?: React.CSSProperties;onSelect: (id: string) => void;const [count, setCount] = useState(0);const [user, setUser] = useState<User | null>(null);const [items, setItems] = useState<string[]>([]);const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");setOpen: React.Dispatch<React.SetStateAction<boolean>>;(e: React.ChangeEvent<HTMLInputElement>) => setName(e.currentTarget.value)(e: React.ChangeEvent<HTMLSelectElement>) => setSize(e.currentTarget.value)(e: React.MouseEvent<HTMLButtonElement>) => {}(e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); }(e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") save(); }const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {};const inputRef = useRef<HTMLInputElement>(null);const timer = useRef<number | null>(null);ref?: React.Ref<HTMLInputElement>;const ThemeContext = createContext<Theme | null>(null);type Action = { type: "add"; item: Item } | { type: "clear" };Optional props get defaults in the signature; children accepts anything renderable.
interface CardProps {
title: string;
tone?: "neutral" | "success";
children: React.ReactNode;
}
export function Card({ title, tone = "neutral", children }: CardProps) {
return (
<section className={tone === "success" ? "card card-ok" : "card"}>
<h2>{title}</h2>
{children}
</section>
);
}The hook throws a clear error outside the provider and returns a non-null value inside it.
import { createContext, useContext, useState } from "react";
type Theme = "light" | "dark";
interface ThemeValue { theme: Theme; toggle: () => void }
const ThemeContext = createContext<ThemeValue | null>(null);
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>("light");
const toggle = () => setTheme((t) => (t === "light" ? "dark" : "light"));
return <ThemeContext.Provider value={{ theme, toggle }}>{children}</ThemeContext.Provider>;
}
export function useTheme() {
const value = useContext(ThemeContext);
if (!value) throw new Error("useTheme must be used inside ThemeProvider");
return value;
}Inside each case the action is narrowed, so action.item only exists where it should.
interface Item { id: string; name: string }
interface State { items: Item[] }
type Action = { type: "add"; item: Item } | { type: "remove"; id: string } | { type: "clear" };
function reducer(state: State, action: Action): State {
switch (action.type) {
case "add": return { items: [...state.items, action.item] };
case "remove": return { items: state.items.filter((i) => i.id !== action.id) };
case "clear": return { items: [] };
}
}
// const [state, dispatch] = useReducer(reducer, { items: [] });T is fixed by the items the caller passes, so renderItem receives the right type.
interface ListProps<T> {
items: T[];
getKey: (item: T) => string;
renderItem: (item: T) => React.ReactNode;
}
export function List<T>({ items, getKey, renderItem }: ListProps<T>) {
return <ul>{items.map((item) => <li key={getKey(item)}>{renderItem(item)}</li>)}</ul>;
}
// <List items={users} getKey={(u) => u.id} renderItem={(u) => u.name} />The parent creates the ref; the child places it on the real input.
import { useRef } from "react";
function TextField({ label, ref }: { label: string; ref?: React.Ref<HTMLInputElement> }) {
return <label>{label} <input ref={ref} /></label>;
}
export function Search() {
const inputRef = useRef<HTMLInputElement>(null);
return (
<>
<TextField label="Search" ref={inputRef} />
<button onClick={() => inputRef.current?.focus()}>Focus</button>
</>
);
}Most type errors in a React codebase start at a component boundary. Write an interface for the props, destructure them in the signature, and the checker validates every place the component is used.
Optional props get a question mark and usually a default in the destructuring, such as size = "md". Union props like variant: "primary" | "ghost" give you autocomplete and reject typos.
Every handler receives a React synthetic event typed by the element it came from. Use event.currentTarget to read the element the handler is attached to; its type comes from the generic argument.
If you prefer to type the whole handler, React exports handler types too, for example React.ChangeEventHandler<HTMLInputElement>.
A list or select that works with any item type can take a type parameter. The caller's data fixes the type, and render props receive correctly typed items without casts.
Add children: React.ReactNode to the props interface. ReactNode covers strings, numbers, elements, arrays and null. Use React.ReactElement only when the component must receive a single JSX element.
An empty array gives the checker nothing to infer from. Pass the element type: useState<string[]>([]). The same applies to null starting values, as in useState<User | null>(null).
Call useRef<HTMLInputElement>(null) and attach it with ref={inputRef}. Read inputRef.current with a null check, because it is null until React mounts the element and again after it unmounts.
The current React documentation shows a function component receiving ref as a regular prop and placing it on the inner element. Type that prop as React.Ref<HTMLInputElement>. Older code wraps the component in forwardRef instead.
When there is no sensible default, use createContext<Value | null>(null) and wrap useContext in a small hook that throws if the value is null. Every consumer then gets a non-null type and a clear error if a provider is missing.
Related: TypeScript interfaces, TypeScript vs JavaScript, React hooks cheat sheet, React Hook Form examples, Data fetching in React.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.