TypeScript＆amp; React - Component实现接口 - 用作类型？

Question

假设我有以下组件

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

现在我想说某个变量是instance的{​​{1}} React.Component IProps, IState和implements MyInterface，类似

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

有人可以澄清吗？我刚开始使用TypeScript而无法解决这个问题。 有什么替代方案？

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

Answer 1

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

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

colA -2

typescript doc

为什么会出现这种语法？

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

TypeScript最有可能使用此语法而不是new_df = read.table(text = 'colA colB 3 10 3 10 3 10 2 10 2 10 2 10 2 10 1 10 1 10 1 10 90 7 90 7 89 7 89 7 89 7 88 7 88 7 71 7 71 7 70 7 70 7 70 7 69 7 69 7 44 5 44 5 44 5 43 5 42 5 41 5 41 5 41 5 40 5 40 5 120 1 100 1', header = TRUE) 语法，因为它与联合类型的匹配更紧密。

     colA colB index_col
        3 10      1
        3 10      1
        3 10      1
        2 10      1
        2 10      1
        2 10      1
        2 10      1
        1 10      1
        1 10      1
        1 10      1
        90 7      2
        90 7      2
        89 7      2
        89 7      2
        89 7      2
        88 7      2
        88 7      2
        71 7      3
        71 7      3
        70 7      3
        70 7      3
        70 7      3
        69 7      3
        69 7      3
        44 5      4
        44 5      4
        44 5      4
        43 5      4
        42 5      4
        41 5      5
        41 5      5
        41 5      5
        40 5      5
        40 5      5
       120 1      6
       100 1      7

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

尽管如此，myComponent: Component<IProps, IState> | MyInterface 和Component<IProps, IState>令牌也可用作按位AND和OR运算符。