TypeScript & React - 组件实现接口 - 用作类型？

Question

假设我有以下组件

class MyComponent extends 
React.Component<IProps, IState> implements MyInterface {...}

现在我想说一些变量是 React.Component 的 instance 具有 IProps, IState 和 implements MyInterface，类似于

myComponent: Component<IProps, IState> implements MyInterface，但这不起作用，我不知道为什么。

有人可以澄清一下吗？我只是从 TypeScript 开始，无法弄清楚。 有什么替代方法？

---

请注意： myComponent: MyComponent 不是我想要的答案。我想改正我对 TypeScript 的误解。

Answer 1

TypeScript 提供了一种称为交集类型的东西。这允许您组合多种类型。

在你的情况下，它会是这样的：

myComponent: Component<IProps, IState> & MyInterface.

typescript doc

为什么是这种语法？

注意：我不知道 TypeScript 为什么选择这种语法，下面只是我对我认为他们可能选择这种语法的原因的猜测。

TypeScript 很可能使用这种语法而不是 implements 语法，因为它更接近于联合类型。

myComponent: Component<IProps, IState> | MyInterface

上述类型表示：对象必须是Component<IProps, IState>类型或实现MyInterface接口。对于 TypeScript，类型中的类和接口之间的区别非常小。类类型只不过是一个带有构造函数字段的接口。

尽管如此，& 和 | 标记也用作按位 AND 和 OR 运算符。