TypeScript React：如何将泛型传递给 React.ComponentProps<typeof ComponentWithGenericProps> ?

Question

语境

我有一个Tree组件，它的 props 是使用泛型类型T定义的：

type ITreeProps<T> = ICollapsibleTreeProps<T> | INonCollapsibleTreeProps<T>;

我的组件定义如下：

const Tree = <T extends {}>(props: ITreeProps<T>) => { /* ... */ };

问题

现在，如果我使用React.ComponentProps创建一个type （在导入Tree组件的单独文件中）

type ITreeComponentProps = React.ComponentProps<typeof Tree>;

泛型被自动视为{} ，因此结果类型为：

type ITreeComponentProps = ICollapsibleTreeProps<{}> | INonCollapsibleTreeProps<{}>

题

有没有办法将泛型传递给React.ComponentProps以便我可以指定我自己的类型而不是强制它{} ？

我的直觉是执行以下操作，但这是行不通的，尽管我希望泛型类型无需指定T ：

type ITreeComponentProps<T> = (React.ComponentProps<typeof Tree>)<T>;

结果类型为

type ITreeComponentProps<T> = ICollapsibleTreeProps<T> | INonCollapsibleTreeProps<T>

所以我可以这样使用它：

const someFunction = <T extends {}>(p: ITreeComponentProps<T>) => { /* ... */ }; 

临时解决方案

在我找到解决方案之前，我可以将它用作最后一个片段的唯一方法是导出ITreeProps并将其导入我的其他文件中，而不是使用React.ComponentProps 。 但是，我通常不喜欢将我的组件道具作为个人偏好导出。

Answer 1

typeof Tree<Foo>

这在 TypeScript 中是不可能的https://github.com/microsoft/TypeScript/issues/204

TL;DR typeof适用于值，而Tree<Foo>是一种类型，尽管Tree本身是一个值。

PS：我们还使用与组件一起导出的类型

PPS：这里是维护者不鼓励使用 React.ComponentProps https://github.com/DefinitelyTyped/DefinitelyTyped/pull/34899#issuecomment-485815000