React's `ComponentProps` type issues in TypeScript 5.5.4

[jakubmazanec]

🔎 Search Terms

react, forwardRef, component props, ComponentProps

🕗 Version & Regression Information

• This changed between versions 5.4.5 and 5.5.5

⏯ Playground Link

https://www.typescriptlang.org/play/?jsx=4&ts=5.5.4#code/JYWwDg9gTgLgBAbwLACg5xgTzAUzgUQBscQcA7GAFWxwBpV0tc4BhCcCM8mABSgjABnemgw1W7SFwp8BggOrAYACwgBXGACUcAMxHod0AO4BDKABNtOuCcFwARrZwAxY2cu79Y5q6imLVtpk5jhQzmpkAMYwwJxeTHhW8eKyQooqLMrAhOZQ5CIAvnA6-CBwAER5JtHlANyoqDgAHpCwxRHRsWTFbgG6ADyUtHA8AHwAFAxwkZKc3ABccONg-EKLPMN5OotWg6MAlHAAvKNw2tUwAHTn0QByECEi+4vLq4LrcABkiHBbAPw7AaUU4FQ4nM44C7XSF3B54ZCiPIwNRQbqOQQuXoeHSTUToGYcaTwWxwCIAazIECM3RJvn82KCITCHRinH65Mp1OGHKpZFGXn29RQBQaKGarXgCTgAGVQGBiGxCdxUnYjiM3ullJlsrlyP0EfjCLZBLcTKQAXBBDAoMAyABzIUFUZCxotaDwHQsroyuUK2ZE15yRay8B+pUyN6HA2-HDI1FwMhqQiER2i8Xu7x4RVSbiaunuKwqwZwZowcjmOxEEjcai4U5HKbZuYRuSa9RaIGnb7Rw3G03mxZWm32oXodC2C2UOAAH1JwV0tpw5lHcAKLrFbraMzIVok4ZgeaxVmOPT8Bd0uPQxdL5crxFIFFreDV5UEYBMZHKEym6BWQb3OYUIeZ59DoRbAl46BbICOj9AAEpQACyAAyVYPjA-JTGCpw9jGcbdImyYrgUTzrlK2iCEmMAAIwnk2RJFgkEDWCG8o4PR3CjAA2uUkRGoIJpmjg5QALpCuROCUYQMAAEx0f6ypvP0THWBxQFKMo+agdxvH8YJpCibUcAAPTGSWUD8FAcDKKEOCisQ8B5FJNGAs5tEvoI7A4AAtHxxreWQQl1KgDkxs5MmuVRckeV5vl6QFQVGaZ5mWdZtmoEAA

💻 Code

I don't know if it's strictly TypeScript issue or not (please let me know if I should report this elsewhere instead), but in v5.5.4 I noticed that type ComponentProps from React library doesn't work anymore when I use custom forwardRef (I use it so my generic components are typed correctly):

function forwardRef<T, P>(
  component: (props: P, ref: Ref<T>) => React.ReactNode,
): (props: P & { ref?: Ref<T> }) => React.ReactNode {
  return baseForwardRef(
    component as unknown as ForwardRefRenderFunction<unknown, unknown>,
  );
}

type ComponentWithForwardRefProps<T extends ElementType> =
  ComponentPropsWithoutRef<T> & {
    className?: string;
    as?: T | undefined;
  };

const ComponentWithForwardRef = forwardRef(
  <T extends ElementType = "span">(
    props: ComponentWithForwardRefProps<T>,
    ref: Ref<HTMLElement>,
  ) => {
    return null;
  },
);

type Result2 = ComponentProps<typeof ComponentWithForwardRef>["className"]; // error here: `className` cannot be used to index type etc.
let result2: Result2 = "some-class-name"; // error here, obvisously

When i remove the default value for type parameter T, it works again:

export const ComponentWithForwardRef = forwardRef(
  <T extends ElementType>(
    props: ComponentWithForwardRefProps<T>,
    ref: Ref<HTMLElement>,
  ) => {
    return null;
  },
);

type Result2 = ComponentProps<typeof ComponentWithForwardRef>["className"]; // Result2 is `string | undefined`

let result2: Result2 = "some-class-name"; // no error

It also works if I remove the as props:

type ComponentWithForwardRefProps<T extends ElementType> =
  ComponentPropsWithoutRef<T> & {
    className?: string;
  };

I'm not sure if this is a regression, or if I'm doing something wrong, but I would be grateful to get some more info on this. Thank you.

🙁 Actual behavior

Component props are not correctly inferred.

🙂 Expected behavior

Same as in previous version of TypeScript.

Additional information about the issue

No response

[Andarist]

I think it bisects to #58008 , it looks similar to #59108 but it wasn't fixed by #59121

This is a bug - the conditional type stays deferred here but it shouldn't.

A slimmed down repro case can be seen here (TS playground):

type ComponentProps<T> = T extends (props: infer P) => unknown ? P : never;

declare function wrapComponent<P>(
  component: (props: P) => unknown,
): (props: P) => unknown;

const WrappedComponent = wrapComponent(
  <T extends string = "span">(props: {
    as?: T | undefined;
    className?: string;
  }) => {
    return null;
  },
);

type RetrievedProps = ComponentProps<typeof WrappedComponent>;

It can also be reproduced with the code from #59108 after adding a default type parameter to the wrapped generic function (TS playground):

declare const f: <T>(f: (x: T) => unknown) => (x: T) => unknown
declare const g: <T extends unknown = string>(x: { foo: T }) => unknown

const h = f(g)

type FirstParameter<T> = T extends (x: infer P) => unknown ? P : unknown
type X = FirstParameter<typeof h>['foo']