5 questions foundWhy do many teams choose to use TypeScript together with React?
Beginner TypeScript adds type checking to JavaScript, catching many common mistakes, like passing the wrong kind of value to a component, before the code even runs, right inside your code editor. This makes larger codebases easier to maintain and helps new developers understand exactly what data a component expects.
type ButtonProps = {
label: string;
onClick: () => void;
};
function Button({ label, onClick }: ButtonProps) {
return <button onClick={onClick}>{label}</button>;
}
Real-world example A team catches a bug before it ever reaches production, where a component was accidentally passed a number instead of the expected string, thanks to TypeScript immediately flagging the mismatch right inside the code editor.
Common follow-ups: Does adding TypeScript slow down how quickly a team can write new code at first?;What is the difference between a type and an interface in TypeScript?
Components & JSX;Testing
How do you properly type the useState hook in a React component using TypeScript?
Intermediate TypeScript usually figures out the correct type automatically based on the initial value you give useState, but you can also specify the type explicitly inside angle brackets, which is especially useful when the initial value is null but the state will later hold a specific object type.
// TypeScript infers this is a number automatically
const [count, setCount] = useState(0);
// Explicitly typed, useful when starting with null
type User = { name: string; age: number };
const [user, setUser] = useState<User | null>(null);
Real-world example A profile component correctly types its user state as either a User object or null, letting TypeScript warn the developer immediately if they try to access user.name without first checking that user is not null.
Common follow-ups: Why is it necessary to explicitly type useState when the initial value is null?;How does TypeScript help prevent a common bug where you forget to check if a value is null before using it?
Hooks;Custom Hooks
How would you type a component's children prop correctly using TypeScript?
Intermediate React provides a built in type called ReactNode that covers anything that is valid to render, including text, numbers, elements, and arrays of elements, making it the correct type to use for a children prop in most situations.
import { ReactNode } from 'react';
type CardProps = {
title: string;
children: ReactNode;
};
function Card({ title, children }: CardProps) {
return (
<div>
<h2>{title}</h2>
{children}
</div>
);
}
Real-world example A shared Card component correctly accepts any valid content as its children, whether it is plain text, a single element, or several elements together, thanks to using the ReactNode type from React.
Common follow-ups: What is the difference between ReactNode and the more specific ReactElement type?;Why should children not simply be typed as a string if it might contain other elements too?
Component Composition & Children Props;Components & JSX
How would you create a reusable, generic React component using TypeScript, such as a list component that works with any data type?
Advanced TypeScript generics let a component's prop types adapt to whatever specific data type is actually passed in, letting you write one flexible List component that works correctly and safely whether it is displaying a list of strings, numbers, or custom objects, with full type checking still applying.
type ListProps<T> = {
items: T[];
renderItem: (item: T) => React.ReactNode;
};
function List<T>({ items, renderItem }: ListProps<T>) {
return <ul>{items.map((item, i) => <li key={i}>{renderItem(item)}</li>)}</ul>;
}
<List items={[1, 2, 3]} renderItem={(n) => <span>{n}</span>} />;
Real-world example A design system builds a single generic List component that safely works for a list of product objects on one page and a list of plain usernames on another, with TypeScript correctly checking each usage differently based on the actual data type passed in.
Common follow-ups: How does TypeScript know what type T actually is in a specific usage of this component?;When is it worth the extra complexity of making a component generic versus keeping it more specific?
Component Composition & Children Props;Design Patterns in React
How do you type an event handler function, such as a button's onClick handler, in TypeScript?
Beginner React provides specific event types, like React.MouseEvent, that describe exactly what information a given event handler receives, letting TypeScript check that you are using the event object correctly, such as accessing properties that actually exist on that specific kind of event.
function Button() {
function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
console.log('Button clicked at', event.clientX, event.clientY);
}
return <button onClick={handleClick}>Click Me</button>;
}
Real-world example A form's submit handler is correctly typed as React.FormEvent, letting TypeScript immediately flag a mistake if the developer tries to access a property that does not actually exist on a form submission event.
Common follow-ups: How does the correct event type differ between a button click, a form submission, and typing into an input?;What happens if you use the wrong event type for a specific handler?
Forms: Controlled & Uncontrolled Components;Components & JSX