扩展类时将对象作为元/标签传递。这个语法是什么？它有什么作用？

我刚刚开始了我的第一个react-native项目，并偶然发现了一个奇怪的语法，至今我没有看到（至少在javascript上下文中）。扩展类时将对象作为元/标签传递。这个语法是什么？它有什么作用？

这是来自反应，反应原生或ecma6吗？而更重要的是：这是什么规定：

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

我感到困惑的这一部分：< {}>

令牌<和>让我假设有反应的事，但我可能是错误的，因为我曾记得以前在其他语言中看过这个。

请赐教:-)

来源

2017-10-16 Philipp Wrann

您使用的打字稿什么？这看起来像一个普通的https://www.typescriptlang.org/docs/handbook/generics.html – klugjo

没有，被生成的代码初始化项目时反应母语。 –

你有一个链接到您的样板或启动项目？这句法不是ES6或反应本地 – klugjo

欢迎来到精彩的静态分析世界！

您看到的语法是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

来源

2017-10-16 11:52:28

WOW，凯尔。这个解释给了我生命！非常感谢 –

扩展类时将对象作为元/标签传递。这个语法是什么？它有什么作用？

回答

相关问题