TypeScript makes React components self-documenting.
Direct answer
Type your props with an interface or type, let useState infer from its initial value (or pass a generic when it starts as null) and use React's event types for handlers. The editor then autocompletes and warns about mistakes.
Props
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}
function Button({ label, onClick, disabled = false }: ButtonProps) {
return <button onClick={onClick} disabled={disabled}>{label}</button>;
}
State and events
const [count, setCount] = useState(0);
const [user, setUser] = useState<User | null>(null);
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
setValue(e.target.value);
}
Children
interface CardProps {
children: React.ReactNode;
}
Where Teyro fits
Teyro's TypeScript for Beginners course turns this into short lessons you can play in a few minutes a day. It has 20 lessons, and you can start free.
The bottom line
Type the boundaries (props), infer the rest.
