javascript - javascript - ES6 语法

Question

在检查一个开源项目（反应数据网格）的来源时，我偶然发现了这种我无法理解的语法：

class EditorBase extends React.Component {

  getStyle(): {width: string} {
    return {
      width: '100%'
    };
}

尤其是那getStyle(): {部分。

我尝试咨询其他 SO 问题、MDN函数和类参考，但没有提及上述语法。

我在这里想念什么？

score 2 · Accepted Answer

所以这看起来是 Flow-type（由 Facebook 创建）的用法，它是 Javascript 的静态类型检查器。（您可以将其视为 Linter，但用于数据类型而不是语法）

所以看起来令人困惑的部分可能是这一点：

{width: string}

在流程中，当函数的括号后面有一个冒号时，它将表示该函数的预期返回类型。

此代码通知 Flow 该函数应返回一个对象，该对象的键为“宽度”，该键应为“字符串”类型。

查看Flow.org了解更多信息，以及如何开始自己使用它！

score 1 · Accepted Answer

您所指的代码检查传递给方法的变量的类型。

流代码/类型检查仅在开发模式下使用，将被 babel 剥离。

Flow 是 JavaScript 的静态类型检查器。

阅读有关流量的更多信息。

这是用于 react-data-grid的babel 插件。它实际上已被弃用，您应该改用babel flow-runtime（以防您想使用它）。

2 回答 2