Facebook React的打字稿

Question

我最近一直在研究React并且希望使用JSX和打字稿。我无法找到React的此类资源或类型定义的任何资源。

你可以在JSX中使用Typescript并且可以使用类型定义吗？

Answer 1

React团队目前正在讨论将Typescript注释作为内部使用的东西。很快，这可能会在官方改变。

Answer 2

React jsx将在upcomming TypeScript 1.6中提供。这是more info。

Answer 3

它没有赢。 TypeScript类型转换语法之间存在很多歧义：

(<foo>bar)

和JSX内联XML语法：

(<foo>bar)</foo>)

Answer 4

FrançoisdeCampredon为React创建了一个类型定义：https://github.com/fdecampredon/react-observe-todomvc/blob/typescript/src/declarations/react.d.ts

它显然不支持JSX，因为它是另一种语法与TypeScript不同的语言。

Answer 5

做了一些研究，并认为我会回答我自己的问题。似乎JSX编译器还没有识别出typescript构造（希望它稍后会出现）。

Answer 6

关于jsx：

您可以将您的反应组件拆分为两个文件。第一个将包含除render函数之外的所有内容，因此可以用Typescript编写。第二个是使用JSX实现render函数。我知道这反对“反应方式”，但它解决了这个问题。除了渲染函数之外，你将拥有每个Typescript的强度。

Answer 7

您应该查看以下内容：

https://www.youtube.com/watch?v=9PTa9-PPVAc

关于如何使React与TypeScript一起使用，它有很多指针。

Facebook最近还宣布了一个名为Flow的项目，该项目还为Javascript添加了静态类型。由于它们都是Facebook项目，因此在处理React.js时使用Flow比使用TypeScript更容易。

Answer 8

对于create-react-app项目，只需使用npx create-react-app my-app --template typescript命令开始。

进一步阅读：https://create-react-app.dev/docs/adding-typescript/

Answer 9

现在，官方Typescript docs

似乎已经发生了变化

TypeScript支持嵌入，类型检查以及将JSX直接编译为JavaScript。

还有this，介绍如何直接使用Typescript启动项目