TypeScript typeof泛型類的類型

Question

我想做一個函數，它將返回typeof React Component，它必須實現一個特定的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> {}

我想創建一個函數，該函數可以返回組件，而props接口為此擴展了INameProps

到目前為止，我已經弄清楚了：

export function getComponents<T extends INameProps, S extends any>(): React.Component<T, S> {
    return Component1; // should be fine
    return Component2; // should be fine
    return Component3; // should not be allowed, since T for Component3 does not extend INameProps
}

但這是不正確的-此函數的返回類型是這些組件的實例。

要獲得類型，我想我只需要像這樣添加typeof關鍵字：

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

但是TypeScript不喜歡，我在React.Component之后添加了泛型<T, S> 。

當我這樣定義時，它會編譯：

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

但這不能滿足我的要求-像這樣的返回函數類型是任何React.Component的類型。

我該怎么寫？

編輯：

我環顧四周，發現React.ComponentType （對於Flow，我沒有看到有關TypeScript的任何文檔）

事實證明，答案很簡單。 我試圖使用高級類型的TypeScript提出自己的方式，但是React已經想到了這一點-

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

Answer 1

某些類C的構造函數（或類型）可以表示為new () => C ，加減構造函數args和泛型類型。

不過，您的方法在這里行不通。 當您具有通用函數時，則由調用者決定選擇其通用類型。 有時它們是由編譯器推斷的，但無論如何，都是由調用者控制它們的。 因此有人可能將您的函數稱為getComponent<SomeIrrelevantType> ，那么您想返回什么？ 在運行時，您甚至無法看到將通用類型設置為不相關的內容。

您可以使用的方法與此類似：

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

Answer 2

我環顧四周，發現React.ComponentType （對於Flow，我沒有看到有關TypeScript的任何文檔）

事實證明，答案很簡單。 我試圖使用高級類型的TypeScript提出自己的方式，但是React已經想到了這一點-

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