打字稿匿名类类型 - HOC答案

【问题标题】：Typescript Anonymous class type - HOC打字稿匿名类类型 - HOC
【发布时间】：2019-08-10 10:57:30
【问题描述】：

我正在尝试创建一个通用 HOC，但是我在类型方面遇到了一些问题

让我们从简单的开始：

class Abc extends React.Component<{}> {

    hello() {
    }

    render() {
        return <View />
    }
}

在 JSX 中引用，没有问题

<Abc
    ref={(r: Abc) => {
        r.hello();
    }}
/>

现在让我们创建一个匿名的，就像 HOC 会返回一样

const Bcd = class extends React.Component<{}> {

    hello() {
    }

    render() {
        return <View />
    }
};

做和过去一样的事情

<Bcd
    ref={(r: Bcd) => {
        r.load()
    }}
/>;

现在我们得到TS2304: Cannot find name Bcd，用于以下(r: Bcd)。

我尝试将其更改为(r: (typeof Bcd))，但随后它会抱怨typeof Bcd 与Bcd 不兼容

是我做错了什么还是打字稿不支持这种类型的输入？

【问题讨论】：

无需显式键入您的 ref var。 Typescript 将在您的示例中正确推断 Bcd 的类型。你可以写 ref={r=>{r!.hello()}} 并且 ts 不应该抱怨。
好点，这可以解除对我的阻止，但是有没有办法将引用存储在属性中并且仍然可以访问该类型？我试过createRef<Bcd>()，但它抱怨Bcd 不是一个类型。有什么见解吗？

标签： reactjs typescript jsx

【解决方案1】：

在您的示例中，Abc 是一个 JavaScript 变量名称和一个 TypeScript 类型名称，而 Bcd 是一个 JavaScript 变量名称，但不是一个 TypeScript 类型名称。 Bcd 的类型是 {hello(): void} & React.Component<{}> 的未命名 intersection type。因为该类型没有名称，所以您不能在 TypeScript 代码的其他地方将其作为类型引用。

【讨论】：