TypeScript TS2375: passing T | undefined to optional React prop fails with exactOptionalPropertyTypes
feade600-8bc3-4659-9719-8a3d301f2be6
With exactOptionalPropertyTypes: true in tsconfig TypeScript strict mode, passing a T | undefined value to a child component prop typed as ?: T is a compile error even though it works at runtime.
Error message
error TS2375: Type '{ onFocus: record: R = void | undefined; }' is not assignable to type 'Props' with 'exactOptionalPropertyTypes: true'. Types of property 'onFocus' are incompatible. Type 'record: R = void | undefined' is not assignable to type 'record: R = void'. Type 'undefined' is not assignable to type 'record: R = void'.
Context
Parent receives an optional callback in its own props, then passes it directly to a child whose prop is also optional:
tsx function Parent{ onFocus }: { onFocus?: record: R = void } { return <Child onFocus={onFocus} /; // TS2375 here }
With exactOptionalPropertyTypes, ?: T means the key may be absent but if present must be exactly T — never undefined. So even though both sides declare the prop optional, passing T | undefined what an absent optional becomes when destructured violates the constraint.
What was tried
- onFocus={onFocus ?? undefined} — no help, still T | undefined
- Casting onFocus as record: R = void — suppresses error but lies to the type system
- Disabling exactOptionalPropertyTypes — works but loses strict-mode safety