create-react-app 可以与 TypeScript 一起使用吗

Posted 2023-02-22

【中文标题】create-react-app 可以与 TypeScript 一起使用吗

【英文标题】：Can create-react-app be used with TypeScript

【发布时间】：2017-09-14 14:21:18

【问题描述】：

是否可以将 TypeScript 与 create-react-app 一起使用？如果是这样，你会怎么做？

【问题讨论】：

什么会阻止你这样做？

我 think its possible，但我个人不会使用 javascript 来处理我的客户浏览器 DOM 以外的任何事情。

@WilomGfx 回应“什么会阻止你这样做”：过去我会在 webpack.config.js 中添加一些条目，告诉 webpack 编译 typescript 作为构建过程的一部分。使用 create-react-app，webpack 是隐藏的。没有地方可以配置东西。

你必须运行弹出脚本

【参考方案1】：

你可以这样做：

create-react-app my-app --scripts-version=react-scripts-ts

见https://github.com/wmonk/create-react-app-typescript

此操作无需弹出。

【讨论】：

这个现在好像微软官方支持了：github.com/Microsoft/TypeScript-React-Starter

查看 Martin 的最新回答，因为 ts 现在由 CRA 直接支持。

【参考方案2】：

这是要走的路：

# update create-react-app first
npm update -g create-react-app 
create-react-app my-app --typescript

Create React App v2.1.0 现在支持 TypeScript，因此您不再需要弹出或使用react-scripts-ts fork；

或者你可以add TypeScript to the existing app：

yarn add typescript @types/node @types/react @types/react-dom @types/jest
# or
npm install --save typescript @types/node @types/react @types/react-dom @types/jest  

然后将 .js 文件重命名为 .tsx 文件以开始使用 TypeScript。

请注意，当您运行应用程序时，将为您创建一个 tsconfig.json。您将能够编辑 tsconfig.json，some options 除外。

学分：

[1]Vincent answer

[2]migrate create react app typescript 发帖

【参考方案3】：

Typescript 现在开箱即用，在 create-react-app 版本 2.1 中！

您现在可以使用它，就像这样 (as shown here)： npx create-react-app@next app-name --scripts-version=2.0.6-next.c662dfb0 --typescript

【讨论】：

它将在 v2.1 github.com/facebook/create-react-app/milestone/57

试试 npx create-react-app@next app-name --scripts-version=2.0.6-next.c662dfb0 --typescript -- 来自这个 PR 的评论：github.com/facebook/create-react-app/pull/5550

请注意，我们不建议您在 2.1 完全推出之前开始使用测试版。仍然会有重大变化。

更新：2.1 现已发布！ github.com/facebook/create-react-app/releases。所以这应该工作：npx create-react-app@2.1 app-name --typescript

【参考方案4】：

这里是关于create-react-app--typescript标志的更新

以前为了使用create-react-app 在打字稿中生成新项目，我们使用了typescript 标志，如下所示

npx create-react-app my-app --typescript

但是这个typescript 标志将在create-react-app 的下一个主要版本中删除，如create-react-app --help 中所述

  --typescript (this option will be removed in favor of templates in the next major release of create-react-app)

所以新的解决方案是使用here提到的模板

例如：

npx create-react-app my-app --template typescript

【参考方案5】：

我在 github 问题中为 create-react-app 发布了一个功能请求，回复如下：

嗨！我们还没有准备好考虑 TypeScript（参见 #142 更新）。我们尚未完成 Flow 集成（我们将 建议作为类型安全的首选）。

此外，现在正在发生一些非常有趣的事情。 参见 babel/babylon#320 和 babel/babylon#444。 TypeScript 可能很快就会出现 由巴比伦解析（并由巴别塔编译）。微软有兴趣 看到这种情况发生，并且自己也在开发 WIP。

这个考虑可能还需要几个月的时间。对不起！

虽然未经我们认可，但有一个 CRA 分支支持 打字稿。如果它不适合您，我们无法提供支持，但是 应该的！

不确定如何将其与 levito 的回应相提并论。

这里是github问题的链接：

https://github.com/facebookincubator/create-react-app/issues/1998#issuecomment-295311100

【参考方案6】：

此外，您可以使用此starter (https://github.com/vtereshyn/react-typescript-eslint-starter) 创建您的应用

它不使用 create-react-app，因此完全可定制和可变。因为使用 create-react-app 在某些情况下很难添加一些东西......

【参考方案7】：

您可以使用 Facebook 的官方 Typescript Template 创建 React 应用程序。

做

npx create-react-app my-app --template typescript

或

yarn create react-app my-app --template typescript