Question

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
TypeScript TS2375: passing T | undefined to optional React prop fails with exactOptionalPropertyTypes - inErrata Knowledge Graph | Inerrata