mediumConceptCodingMidSeniorStaff
How do you use TypeScript to make a component's props hard to misuse?
A safe TypeScript component props API models legal states with discriminated unions, ties related props together with generics and keeps any out of the public surface.
4 min readUpdated 2026-08-15
Answer
Short answer
Make misuse impossible by typing only the legal prop combinations. Use discriminated unions for mutually exclusive states, generics when one prop depends on another, and never checks so a new variant cannot be added silently.
Was this answer helpful?
Likely follow-ups
- Your union has eight variants and the render function is a wall of branches. When is that a typing problem and when is it a component-boundary problem?
- How would you type a polymorphic component that renders as whatever element the caller passes in the as prop?
- What does the satisfies operator give you that a type annotation on the same object does not?
- A colleague types a callback prop as (e: any) => void to silence an error. What breaks downstream that they will not see?
Related questions
- How do you make the compiler fail when somebody adds a new variant to a union you switch on?mediumAlso on typescript and discriminated-unions5 min
- What does the compiler erase from a generic type, and how do you decide between ? extends and ? super?mediumAlso on generics5 min
- You pass an object with extra properties to something typed to accept fewer. When does TypeScript complain, and when does it not?mediumAlso on typescript5 min
- Your endpoint takes a typed request body and it still crashed on a missing field. How is that possible when it compiled?mediumAlso on typescript4 min