Reactjs TypeScript泛型类的类型typeof

我想做一个函数，返回typeof React组件，它必须实现一个特定的props接口

我想返回一个类型，而不是该类型的实例

鉴于此：

interface INameProps {
    name: string;
}
interface ITypeProps {
    type: string;
}
class Component1 extends React.Component<INameProps> {}
class Component2 extends React.Component<INameProps> {}
class Component3 extends React.Component<ITypeProps> {}

但TypeScript不喜欢在React.Component之后添加泛型

当我这样定义它时，它会编译：

export function getComponents<T extends INameProps, S extends any>(): typeof React.Component

导出函数getComponents（）：类型为React.Component 但这并不是我想要的——像这样的函数的返回类型是任何React.Component的类型

我该怎么写

编辑：

---

我四处寻找，发现（对于Flow，我没有看到任何关于TypeScript tho的文档）

事实证明，答案相当简单。我试图想出我自己使用高级打字脚本的方法，但我已经想到了这个-

export function getComponent(): React.ComponentType<INameProps> {
    return Component1; // allowed
    return Component2; // allowed
    return Component3; // not allowed, since props for Component3 does not extend INameProps
}

export function getComponent(): React.ComponentType<INameProps> {
    return Component1; // allowed
    return Component2; // allowed
    return Component3; // not allowed, since props for Component3 does not extend INameProps
}

导出函数getComponent（）：React.ComponentType{
返回组件1；//允许
返回组件2；//允许
return Component3；//不允许，因为Component3的props不扩展INameProps
}

某些类

C

的构造函数（或类型）可以表示为

new（）=>C

，加减构造函数参数和泛型类型

不过，你的方法在这里是行不通的。当您有一个泛型函数时，调用方决定选择它的泛型类型。有时它们是由编译器推断出来的，但无论如何，是调用方控制它们。因此，可能有人将您的函数调用为

getComponent

，那么您希望返回什么？在运行时，您甚至无法看到泛型类型被设置为不相关的类型

您可以使用的方法与此类似：

export function getNamePropsComponents():
    (new () => React.Component<INameProps, any>)[] {
  return [Component1, Component2]; // should be fine
  return [Component3]; // doesn't compile
}

导出函数getNamePropsComponents（）：
（新的（）=>React.Component）[]{
return[Component1，Component2]；//应该可以
返回[Component3]；//未编译
}

某些类

C

的构造函数（或类型）可以表示为

new（）=>C

，加减构造函数参数和泛型类型

不过，你的方法在这里是行不通的。当您有一个泛型函数时，调用方决定选择它的泛型类型。有时它们是由编译器推断出来的，但无论如何，是调用方控制它们。因此，可能有人将您的函数调用为

getComponent

，那么您希望返回什么？在运行时，您甚至无法看到泛型类型被设置为不相关的类型

您可以使用的方法与此类似：

export function getNamePropsComponents():
    (new () => React.Component<INameProps, any>)[] {
  return [Component1, Component2]; // should be fine
  return [Component3]; // doesn't compile
}

导出函数getNamePropsComponents（）：
（新的（）=>React.Component）[]{
return[Component1，Component2]；//应该可以
返回[Component3]；//未编译
}

我四处寻找，发现（对于Flow，我没有看到任何关于TypeScript tho的文档）

事实证明，答案相当简单。我试图想出我自己使用高级打字脚本的方法，但我已经想到了这个-

export function getComponent(): React.ComponentType<INameProps> {
    return Component1; // allowed
    return Component2; // allowed
    return Component3; // not allowed, since props for Component3 does not extend INameProps
}

export function getComponent(): React.ComponentType<INameProps> {
    return Component1; // allowed
    return Component2; // allowed
    return Component3; // not allowed, since props for Component3 does not extend INameProps
}

导出函数getComponent（）：React.ComponentType{
返回组件1；//允许
返回组件2；//允许
return Component3；//不允许，因为Component3的props不扩展INameProps
}

我四处寻找，发现（对于Flow，我没有看到任何关于TypeScript tho的文档）

事实证明，答案相当简单。我试图想出我自己使用高级打字脚本的方法，但我已经想到了这个-

export function getComponent(): React.ComponentType<INameProps> {
    return Component1; // allowed
    return Component2; // allowed
    return Component3; // not allowed, since props for Component3 does not extend INameProps
}

export function getComponent(): React.ComponentType<INameProps> {
    return Component1; // allowed
    return Component2; // allowed
    return Component3; // not allowed, since props for Component3 does not extend INameProps
}

导出函数getComponent（）：React.ComponentType{
返回组件1；//允许
返回组件2；//允许
return Component3；//不允许，因为Component3的props不扩展INameProps
}

返回组件1

提供构造函数，而不是实例，它是最接近实例类型的函数。TypeScript类型仅在编译时使用，不能像在运行时传递值那样传递。我想你拥有的可能就是你想要的。例如，您应该能够在tsx中实际实例化组件。

return Component1

为您提供构造函数，而不是实例，它是最接近实例类型的。TypeScript类型仅在编译时使用，不能像在运行时传递值那样传递。我想你拥有的可能就是你想要的。例如，您应该能够在tsx中实际实例化组件。