扩展类时将对象作为 Meta/Tag 传递。这是什么语法，它有什么作用？答案

【问题标题】：Passing an object as Meta/Tag when extending a class. What is this syntax and what does it do?扩展类时将对象作为 Meta/Tag 传递。这是什么语法，它有什么作用？
【发布时间】：2018-03-27 18:59:54
【问题描述】：

我刚开始我的第一个 react-native 项目，偶然发现了一种奇怪的语法，到目前为止我还没有看到（至少在 javascript 上下文中）。

这是来自 react、react-native 还是 ecma6？更重要的是：它指定了什么：

export default class App extends Component<{}> {
    // class code
}

我对这部分感到困惑：

标记让我假设这与反应有关，但我可能错了，因为我记得以前在其他语言中看到过。

请赐教:-)

【问题讨论】：

你在使用 TypeScript 还是什么？这看起来像一个通用的typescriptlang.org/docs/handbook/generics.html
否，该代码是 react-native 在初始化项目时生成的。
您有样板文件或启动项目的链接吗？此语法不是 ES6 或 react native
这里你可以看到模板，因为它将被复制到你的新项目中：github.com/facebook/react-native/blob/…

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

欢迎来到静态分析的奇妙世界！

您看到的语法是flow 的语法。 Flow 是一个为 javascript 提供类型的静态分析工具。 Javascript 是一种弱类型语言。这意味着您可以在下面毫无问题地执行此操作。

let name = 'Kyle';
name = 4; // We just assigned a number to a string

因为 Javascript 不会抱怨这一点，这意味着这可能会在以后给我们带来一些问题——尤其是如果我们期望 name 是一个字符串。

Flow 在这一点上发挥了作用，它允许我们在 javascript 代码中使用类型。让我们将示例更改为使用流。这次我们明确地说 name 将是一个字符串。

let name: string = 'Kyle'

现在，当我们尝试分配一个不是字符串的值时，flow 会给我们一个警告；

name = 4;

太棒了！ Flow 现在可以保护我们免受具有错误信息的变量的影响。

让我们看看这如何与 react native 结合起来。

如果您创建了一个新的 react native 项目，您可能会在文件顶部看到如下所示的注释。

// @flow

这是一个告诉流程的标记，请检查此文件是否有错误。在 react native 中，我们的组件具有 Props 和 State。在您发布的示例代码中 - 它告诉流程您的 Props 是一个可以包含任何键的对象。这不是很有用，所以让我们看一个使用类型的示例。

假设我们有一个只呈现名称的组件。

class NamePrinter extends React.Component<{}> {
  render() {
    return <Text>{this.props.name}</Text>
  }
}

现在让我们为其添加一些流类型。

type NamePrinterProps = {
  name: string;
}

// Change our example to use the typing

class NamePrinter extends React.Component<NamePrinterProps>

现在当我们使用 NamePrinter 组件并且 name 不是字符串时，flow 会给我们一个很好的错误。

class App extends React.Component<{}> {
  render() {
    return <NamePrinter name={4}/>
  }
}

恭喜！您现在已经在您的 javascript 项目中使用了静态类型！ Flow 是众多静态分析工具之一。您还可以查看执行此操作以及更多功能的 Typescript。

流 - https://flow.org/en/

打字稿 - https://www.typescriptlang.org

【讨论】：