欢迎来到精彩的静态分析世界!
您看到的语法是flow。 Flow是一个为javascript提供类型的静态分析工具。 Javascript是一个弱类型语言。这意味着你可以在没有任何问题的情况下执
let name = 'Kyle';
name = 4; // We just assigned a number to a string
,因为JavaScript不会抱怨这个,就意味着这个以后可能会导致一些问题,我们 - 尤其是如果我们希望name
是一个字符串。
流程在此时开始救援,并允许我们在JavaScript代码中使用类型。让我们将我们的示例改为使用流。这次我们明确地说这个名字是一个字符串。
let name: string = 'Kyle'
现在,当我们试图分配一个不是字符串的值时,流会给我们一个警告;
name = 4;
太好了! Flow现在可以保护我们免受信息错误的变量的影响。
让我们看看这是如何适应与本机反应。
如果您创建了一个新的反应原生项目,您可能会在文件顶部看到类似于此的评论。
// @flow
这是一个标记,它告诉flow,检查这个文件是否有错误。在反应本机我们的组件有道具和状态。在您发布的示例代码中 - 它告诉流程您的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成分和名称不是一个字符串,流动会给我们一个不错的错误。
class App extends React.Component<{}> {
render() {
return <NamePrinter name={4}/>
}
}
恭喜!你现在在你的javascript项目中使用了静态类型! Flow是许多静态分析工具之一。您还可以检出打字稿这确实该多。
流量 - https://flow.org/en/
打字稿 - https://www.typescriptlang.org
您使用的打字稿什么?这看起来像一个普通的https://www.typescriptlang.org/docs/handbook/generics.html – klugjo
没有,被生成的代码初始化项目时反应母语。 –
你有一个链接到您的样板或启动项目?这句法不是ES6或反应本地 – klugjo