Facebook React 的打字稿答案

【问题标题】：Typescript for Facebook ReactFacebook React 的打字稿
【发布时间】：2013-12-29 22:23:36
【问题描述】：

我最近一直在研究React，并希望使用 JSX 和 typescript。我找不到任何关于此的资源或React 的类型定义。

您可以将 Typescript 与 JSX 一起使用吗？是否提供类型定义？

【问题讨论】：

【解决方案1】：

做了一些研究，并认为我会回答我自己的问题。 JSX 编译器似乎还不能识别 typescript 结构（希望以后能识别）。

【讨论】：

【解决方案2】：

更新：旧答案不再正确。一段时间以来，Typescript 支持带有 .tsx 文件的单独语法上下文，其中它放弃了 <> 转换语法以支持 JSX。

不会的。 TypeScript 类型转换语法之间有很多歧义：
(<foo>bar)
和 JSX 内联 XML 语法：
(<foo>bar)</foo>)

【讨论】：

说得好，但放弃是不是太容易了？我确信有各种各样的解决方法，从上下文相关的语法解析（比如，假设它是一个 React 组件，但如果找不到结束标记，假设它是一个类型断言）到编写 TypeScript 类型断言，例如<<any>>bar 在 .tsx 文件中。
看起来这实际上是可能的。自己还没有运行它，所以请谨慎行事。 github.com/fdecampredon/jsx-typescript
是的，他们只是抛弃了<Class> v 转换，转而支持v as Class 语法用于.tsx 文件。

【解决方案3】：

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

【讨论】：

【解决方案4】：

React 团队目前正在讨论让 Typescript 注释成为内部使用的东西。这可能很快就会在官方上为您改变。

【讨论】：

【解决方案5】：

关于jsx：

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

【讨论】：

【解决方案6】：

你应该看看下面的谈话：

它有很多关于如何使 React 与 TypeScript 一起工作的指针。

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

【讨论】：

【解决方案7】：

React jsx 将在即将发布的 TypeScript 1.6 中可用。这里是more info。

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

现在情况似乎发生了变化，来自官方 Typescript docs

TypeScript 支持嵌入、类型检查和将 JSX 直接编译为 JavaScript。

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

【讨论】：