storybookjs/storybook

[Bug]: TypeScript 5.5 breaks components using generic forwardRef

Open

#28,605 建立於 2024年7月15日

在 GitHub 查看
 (5 留言) (3 反應) (1 負責人)TypeScript (89,909 star) (10,058 fork)batch import
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

  1. Go to the above link
  2. 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

貢獻者指南