什么< {}>是指在javascript扩展结束时?

时间:2017-11-09 23:07:56

标签: javascript reactjs react-native

我在其中一个反馈原生教程中遇到了以下语法。组件声明如下:

export default class App extends Component<{}> {

//implementation

}

我的问题是:这个<{}>是什么意思,这个声明与此有什么不同:

export default class App extends Component {

3 个答案:

答案 0 :(得分:2)

这是一个typescript语法,import Header from './Header.jsx import appSass from './App.scss' 内部的内容是您期望该对象的类型。

答案 1 :(得分:2)

该片段是用打字稿编写的。 <>语法用于指定组件的通用约束。

我的建议是,如果你不使用打字稿,你基本上可以在阅读教程时忽略这种表示法。但是,如果你有兴趣了解更多:< / p>

以下是typescript generics的文档。

Component类中的here is some documentation特别针对打字稿做出反应/反应原生。

基本上,react组件有两个泛型参数,一个用于组件的属性(this.props),另一个用于状态(this.state)。

此外,{}是没有属性的空对象的类型,因此这基本上意味着可以创建组件而不指定任何属性。您可以在JSX中使用此组件,只需一个简单的<App />。您应该注意,默认情况下,道具和州只是{},因此他们不需要像在您的第一个代码段中那样手动指定。实际上,第一个和第二个片段在功能上是相同的(尽管只有第二个片段是有效的jsx,第一个片段需要打字稿编译)。

最后,虽然另一个答案是正确的,但你应该注意到<>中的内容在这种情况下特别是组件的类型&#39;道具&#39;对象,通过this.props在组件中访问。一般来说,泛型约束几乎可以代表任何东西,但在这种特殊情况下,它就是道具的类型。

答案 2 :(得分:1)

当我们谈论反应/反应原生时,它比打字稿更有可能是(facebook&#39; s)flow

它们的语法非常相似,在这种情况下是相同的,但是RN的打包器支持开箱即用,通常使用.js扩展,并且在该生态系统中更为普遍。

无论哪种方式,@ CRice的含义是正确的 - 它是generic,在这种情况下是indicates the type of the class component's props