flowtype绑定导致错误：`协变属性与逆变用法在属性分配中不兼容`。

Question

这个表达式对于 JavaScript/React 来说非常简单，它可以将函数和 this 作用域绑定在一起。

this.toggle = this.toggle.bind(this);

但是当使用flowtype引用时，会导致错误:

我应该怎么做才能通过flow测试？

toggle可以是任何函数，甚至为空。

toggle() {
    /// do nothing
}

- Val

Answer 1

您需要在类中声明您的toggle，例如（简洁方式）：

class Foo {

    toggle: Function = () {
        ...
    }

}

或者，你可以将签名和实际方法分开：

class Foo {

    toggle: Function;

    toggle() {
        ...
    }

}

或者，就像你说的那样

有关更多详细信息，请参见此问题

- Adrien Lacroix

---

我没有注意到这个并没有声明，尽管我看了解决的问题。 - Jigar Shah

@AdrienLacroix 您的答案非常有启发性，再次感谢。我找到了另外3种实现方式，可能会有所帮助。https://dev59.com/MKTja4cB1Zd3GeqPEZoJ#45857984 - Val

@Val，我不知道第四个，这太棒了！谢谢！ - Adrien Lacroix

Answer 2

现在我知道4种实现方法。

在提问之前，我已经知道了1)和2)，但我个人认为那样很丑陋。

感谢Adrien Lacroix的解决方案（第3种），并引领我走向我最喜欢的方式（第4种）。

1. 将this强制转换为any 参考flowtype issue #1517。

(this: any).toggle = this.toggle.bind(this);

2. 将其分配给另一个any类型的变量

将this分配给另一个any类型的变量。与1）相同，但是当有许多要绑定的函数时，这是一种方便的方式，可以避免在每行代码中进行转换。

const self: any = this;
self.toggle = this.toggle.bind(this);

3.清晰地定义函数类型

toggle: Function;
toggle() {
    ...
}

4. 使用类型和箭头函数定义函数

toggle: Function = () => {
    ...
}

- Val

Answer 3

我认为，toggle需要单独声明，如下所示（不确定它的用法，因为没有提供代码）

toggle: Function;

toggle() {
    console.log('ho');
}

您可以查看以下参考链接：

https://github.com/ryyppy/flow-guide/issues/6

并且

https://github.com/facebook/flow/issues/3076

编辑

根据官方文档，您需要按照以下步骤避免错误：

协变属性与逆变使用不兼容，在分配属性时会出错。

function g(o: {-p: string}): void {
  o.p = "default";
}
var o: {p: ?string} = {p: null};
g(o);

- Jigar Shah

---

toggle 可以是一个空函数。我修改了我的答案。 - Val

它实际上可以作为有效的JavaScript表达式运行，只是无法通过Flow测试。 - Val

不，如果是这样的话，那就是 JavaScript 错误。但事实并非如此。 - Val

这对我有用，但没有解决我试图解决的问题，即Webstorm一直抱怨toggle的重复声明。 - fIwJlxSzApHEZIl