Typing Props & Component Return Types
Define prop interfaces, use React.FC vs explicit return types, and type optional props.
Why Type Props?
TypeScript prop types catch wrong prop names, missing required props, and type mismatches at compile time rather than at runtime.
Defining a Props Interface
Create an interface or type alias for your props and pass it as a generic to React.FC or annotate the destructured parameter directly.
interface ButtonProps {
label: string;
onClick: () => void;
variant?: 'primary' | 'secondary';
disabled?: boolean;
}
function Button({ label, onClick, variant = 'primary', disabled = false }: ButtonProps) {
return <button onClick={onClick} disabled={disabled} className={variant}>{label}</button>;
}All lessons in this course
- Typing Props & Component Return Types
- Typing Events & Refs in TypeScript
- Generic Components & Utility Types
- Typing Context & Custom Hooks