更新： create-react-app 2.1.0 版支持typescript，因此对于那些从头开始的人，您可以使用它来创建带有typescript的新应用程序，根据文档，应该使用以下命令来完成：

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

对于现有项目，在更新到 2.1.0 版本后，使用以下命令将以下包添加到项目的依赖项中：

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

然后你可以简单地将 .js 重命名为 .ts 文件。

我找到了一个将 create-react-app 从 javascript 迁移到 typescript 的解决方案，这种方式不需要弹出。

1. 通过运行命令创建一个带有 typescript 的临时 react 项目create-react-app --scripts-version=react-scripts-ts （注意 - 需要create-react-app全局安装）
2. 在您自己的项目中 - 在package.json文件下删除react-scripts
3. react-scripts-ts通过运行命令添加到您的项目中，yarn add react-scripts-ts或者如果您使用的是 npm then npm install react-scripts-ts. 或者，添加"react-scripts-ts": "2.8.0"到 package.json。
4. 从您在步骤 1 中创建的项目中复制文件：tsconfig.json, tsconfig.test.json tslint.json到您自己的项目
5. 在自己的项目中package.json，根据脚本部分，将react-scripts实例react-scripts-ts（应该是下start，build，test和eject
6. 通过使用 yarn 或 npm 安装以下module来安装用于 react 的类型：@types/node,@types/react和@types/react-dom. devDependencies如果使用 package.json ，则放入部分。
7. 将index.js文件名更改为index.tsx
8. 在您的 tsconfig.json 文件中添加以下配置："allowSyntheticDefaultImports": true-了解更多信息

注意第 7 步可能需要额外的修改，这取决于您在 index.js 文件中的内容（如果它依赖于项目中的 JS module）。

现在你可以运行你的项目，它可能会工作，对于那些收到You may need an appropriate loader to handle this file type关于 .js 文件的错误的人来说，这是因为 babel 不知道如何从 .t​​sx 文件加载 .js 文件。我们需要做的是改变项目配置。我发现不运行的方法eject是使用react-app-rewired包。此包允许您配置将添加/覆盖默认项目设置的外部配置。我们要做的是使用 babel 来加载这些类型的文件。让我们继续：

1. react-app-rewired使用 yarn 或 npm安装包

2. 在您的根文件夹（所在package.json的位置）中创建一个名为的新文件config-overrides.js

3. 将此代码放入config-overrides文件中：

   var paths = require('react-scripts-ts/config/paths')
   
   module.exports = function override(config) {
     config.module.rules.push({
       test: /\.(js|jsx)$/,
       include: paths.appSrc,
       loader: require.resolve('babel-loader'),
       options: {
           babelrc: false,
           presets: [require.resolve('babel-preset-react-app')],
           cacheDirectory: true,
       },
     })
   
     return config
   }
   

编辑的package.json所以start/start-js，build，test，和eject脚本使用react-APP-重新接线如图所示项目自述。例如"test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom"。

现在你可以开始你的项目了，问题应该解决了。根据您的项目（其他类型等），您可能需要额外的修改。

希望能帮助到你

正如评论中所建议的，可以定义："compilerOptions": { "allowJs": true}在您的 tsconfig.json 文件中，这样您就可以在不使用 react-app-rewired 的情况下混合使用 JS 和 TS。感谢您提到这一点！

Create React App v2.1.0 今天发布，支持 TypeScript。这意味着您不再需要弹出或使用react-scripts-ts前叉；如果您有一个现有的 Create React App 项目，您需要做的就是安装所需的包：

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

然后，您可以简单地将.js文件重命名为.ts文件以开始使用 TypeScript。

（如果您有一个使用 create-react-app-typescript fork 的现有应用程序，这里有一个关于如何将其移植到常规 Create React App的教程。）

您需要弹出配置才能执行此操作。

弹出后，您需要执行以下步骤：

1. 将typescript扩展名tsx和添加ts到extensionswebpack 配置（dev 和 prod）中的表中。

2. 添加 ts-loader。这是一个例子

   {
     test: /\.(ts|tsx)$/,
     include: paths.appSrc,
     use: [
       {
         loader: require.resolve('ts-loader'),
       },
     ],
   },
   

3. 将 eslint 改为 tslint

4. 添加 source-map-loader 以获得调试 Typescript 文件的可能性。

   {
     test: /\.js$/,
     loader: require.resolve('source-map-loader'),
     enforce: 'pre',
     include: paths.appSrc,
   }
   

5. 创建一个 Typescript 配置文件并记住设置allowJs为 true。

1）。跑

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

或者

yarn add typescript @types/node @types/react @types/react-dom @types/jest

2）。将任何文件重命名为 TypeScript 文件（例如 src/index.js 到 src/index.tsx）

3）。跑npm i @types/react-dom @types/react-redux @types/react-router-dom

4）。重启你的开发服务器！

请享用 ：）