A required key marks a component input that must be supplied for the component to function correctly. Treat requiredness as part of the component contract: optional inputs may enhance behavior, while required inputs have no safe omission. In TypeScript, omit the question mark for a required property; in PropTypes, append .isRequired to its validator. section 5.3.6 section 4.3.1
Choose the enforcement technique according to the component’s existing type contract and ecosystem:
- Use a required TypeScript property when static checking should reject missing inputs before runtime. section 5.3.6
- Reuse native React prop definitions instead of copying long handler types, then require only selected keys with a utility type. section 5.3.6
- Use PropTypes with .isRequired for runtime warnings, while leaving optional properties unconstrained or giving them defaults where appropriate. section 4.3.1 section 4.3
- Prefer explicit property names and constraints because missing or ambiguous contracts can otherwise produce silent failures or JavaScript errors. section 4.3
Require selected button handlers
type ButtonProps = ComponentPropsWithoutRef<"button">; type RequireSome<T, K extends keyof T> = T & Required<Pick<T, K>>; type HoverButtonProps = RequireSome< ButtonProps, "onMouseOver" | "onMouseMove" | "onMouseOut" >; This preserves the native button contract while making only the hover handlers required. The same pattern scales better than manually repeating each handler definition. section 5.3.6
Separate required and optional car data
function Car({ make, model, hasSunroof = false }) { ... } Car.propTypes = { make: PropTypes.string.isRequired, model: PropTypes.string.isRequired, hasSunroof: PropTypes.bool, }; The make and model are required for every instance; hasSunroof remains optional because a default supplies false. section 4.3.1
type ButtonProps = ComponentPropsWithoutRef<"button">; type RequireSome<T, K extends keyof T> = T & Required<Pick<T, K>> type HoverButtonProps = RequireSome< ButtonProps, "onMouseOver" | "onMouseMove" | "onMouseOut" >;
Inspect the reusable TypeScript pattern for requiring several existing component properties without rewriting their definitions. section 5.3.6
