TypeScript with React: FC generics hooks
Type React components with generic props, annotate useState and useRef with explicit types, and type custom hooks that return tuples.
Typing Components
Modern React: type props with an interface and use a plain function. React.FC exists but is no longer recommended (implicit children, no generics support).
// Recommended:
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}
function Button({ label, onClick, disabled }: ButtonProps) {
return <button onClick={onClick} disabled={disabled}>{label}</button>;
}Typing children
Use React.ReactNode for any renderable child.
interface CardProps {
title: string;
children: React.ReactNode;
}
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
{children}
</div>
);
}All lessons in this course
- Template Literal Types
- Decorators and Metadata
- TypeScript with React: FC generics hooks
- Strict Mode and Eliminating any