Senior LevelReact JS & React 19
How do you write advanced TypeScript type guards and assertions for complex React component props?
❓ Interview Prompt: Explain TypeScript Discriminated Unions, User-Defined Type Guards (`isItem`), `asserts`, and strict prop validation.
Using Discriminated Union Interfaces with literal tag properties enforces exhaustive type safety across React component variants:
Discriminated Union Pattern:
Defining 'type AlertProps = { status: 'success'; data: Item[] } | { status: 'error'; error: Error }' ensures TypeScript requires 'data' prop ONLY when 'status === 'success''!
Code Implementation Example
tsx
type AlertProps =
| { status: 'success'; data: string[] }
| { status: 'error'; message: string };
function AlertNotification(props: AlertProps) {
if (props.status === 'error') {
return <p className="error">{props.message}</p>; // TS narrows to error variant!
}
return <ul>{props.data.map(d => <li key={d}>{d}</li>)}</ul>; // TS narrows to data variant!
}💡Enforcing prop variant combinations using TypeScript Discriminated Unions.
🎯 Interview Key Takeaway
Use Discriminated Unions for component props to enforce valid prop combinations and enable type narrowing.
#TypeScript#Discriminated Unions#Type Safety#Senior
Back to all React JS & React 19 Questions→