javascript - ES6 语法

Question

在检查一个开源项目 (react data grid) 的源代码时，我偶然发现了这种我无法理解的语法：

class EditorBase extends React.Component {

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

特别是 getStyle(): { 部分。

我尝试咨询其他 SO 问题、MDN function and classes 参考，但没有提及上述语法。

我在这里错过了什么？

Answer 1

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

所以看起来比较混乱的部分可能是这一点：

{width: string}

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

此代码通知 Flow 该函数应该 return 一个具有 'width' 键的对象，该对象的类型应该是 'string'.

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

Answer 2

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

Flow code/type 检查仅在开发模式下使用，将被 babel 剥离。

Flow is a static type checker for JavaScript.

详细了解 flow。

这里是babel plugin that is being used for react-data-grid. It is actually deprecated, you should instead use babel flow-runtime（以备不时之需）。