storybookjs/storybook
在 GitHub 查看[Bug]: TypeScript 5.5 breaks components using generic forwardRef
Open
#28,605 创建于 2024年7月15日
bughelp wantedtypescript
描述
Describe the bug
Upgrading to TypeScript 5.5 gives the following error:
src/Test.stories.tsx(7,3): error TS2322: Type '<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode' is not assignable to type 'ComponentType<Record<string, unknown> extends Required<ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>> ? any : ComponentProps<...>> | undefined'.
Type '<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode' is not assignable to type 'FunctionComponent<Record<string, unknown> extends Required<ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>> ? any : ComponentProps<...>>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'Record<string, unknown> extends Required<ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>> ? any : ComponentProps<...>' is not assignable to type 'TestProps<ElementType> & RefAttributes<HTMLDivElement>'.
Type 'ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>' is not assignable to type 'TestProps<ElementType> & RefAttributes<HTMLDivElement>'.
Type '{} | (TestProps<ElementType> & RefAttributes<HTMLDivElement>)' is not assignable to type 'TestProps<ElementType> & RefAttributes<HTMLDivElement>'.
Type '{}' is not assignable to type 'TestProps<ElementType> & RefAttributes<HTMLDivElement>'.
Property 'test' is missing in type '{}' but required in type 'TestProps<ElementType>'.
Type 'ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>' is not assignable to type 'TestProps<ElementType>'.
Type '{} | (TestProps<ElementType> & RefAttributes<HTMLDivElement>)' is not assignable to type 'TestProps<ElementType>'.
Type '{}' is not assignable to type 'TestProps<ElementType>'.
Type 'Record<string, unknown> extends Required<ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>> ? any : ComponentProps<...>' is not assignable to type 'TestProps<ElementType>'.
Type 'ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>' is not assignable to type 'TestProps<ElementType>'.
Type '{} | (TestProps<ElementType> & RefAttributes<HTMLDivElement>)' is not assignable to type 'TestProps<ElementType>'.
Property 'test' is missing in type '{}' but required in type 'TestProps<ElementType>'.
src/Test.stories.tsx(13,14): error TS2322: Type '{ args: { test: string; }; }' is not assignable to type 'Story'.
The error is only on components that use the "generic forwardRef" pattern (described here in the React TypeScript cheat sheet).
This pattern is fairly common in component libraries as it's required to support generics on components using forwardRef.
The error isn't present in TypeScript 5.4. It's also not present in TypeScript 5.5 when using forwardRef as imported directly from React.
Reproduction link
https://stackblitz.com/edit/vitejs-vite-gwnmdk?file=src%2FTest.stories.tsx&view=editor
Reproduction steps
- Go to the above link
- Run
npm run build
System
Storybook Environment Info:
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm <----- active
pnpm: 8.15.6 - /usr/local/bin/pnpm
Additional context
No response