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

$ 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.通过运行命令create-react-app --scripts-version=react-scripts-ts（注意-需要全局安装create-react-app），使用typescript创建一个临时react项目
1.在您自己的项目中-在package.json文件下删除react-scripts
1.通过运行命令yarn add react-scripts-ts将react-scripts-ts添加到您的项目中，或者如果您使用的是npm，则使用npm install react-scripts-ts。或者，将"react-scripts-ts": "2.8.0"添加到package.json中。
1.从您在步骤1中创建的项目中复制以下文件：tsconfig.json, tsconfig.test.json tslint.json到您自己的项目
1.在您自己的项目下，在package.json中的scripts部分下，将react-scripts示例更改为react-scripts-ts（应该位于start、build、test和eject下
1.通过使用Yarn或npm安装以下模块来安装react的类型：@types/node、@types/react和@types/react-dom。如果使用package.json，则放入devDependencies部分。
1.将index.js文件名更改为index.tsx
1.在tsconfig.json文件中添加以下配置："allowSyntheticDefaultImports": true至for more info

注意步骤7可能需要额外的修改，具体取决于index.js文件中的内容（如果它依赖于项目中的JS模块）。

现在您可以运行您的项目，它可能会工作，对于那些您正在得到的错误，包含You may need an appropriate loader to handle this file type有关.js文件，这是因为babel不知道如何从.tsx文件加载.js文件。我们需要做的是改变项目配置。我发现不运行eject的方法是使用react-app-rewired包。这个包可以让你配置外部配置，这些外部配置将被添加/覆盖默认的项目设置。我们要做的是使用babel来加载这些类型的文件。让我们继续：
1.使用Yarn或npm安装包react-app-rewired
1.在根文件夹（package.json所在的位置）中，创建一个名为config-overrides.js的新文件
1.将此代码放入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-rewired，如项目自述文件中所示。例如"test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom"。
现在你可以开始你的项目和问题应该得到解决。你可能需要额外的修改取决于你的项目（额外的类型等）。
希望能有所帮助
正如评论中所建议的，可以定义："compilerOptions": { "allowJs": true}，这样你就可以混合JS和TS，而不用react-app-rewired。谢谢你提到这一点！

现在就创建React应用v2.1.0 was released today with TypeScript support。这意味着您不再需要弹出或使用react-scripts-ts fork; all you need to do如果您有一个现有的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。
(If您有一个使用create-react-app-typescript分支的现有应用程序，下面是关于how to port it to regular Create React App的教程。）

为此，您需要弹出配置。
弹出后，您需要执行以下步骤：
1.将打字脚本扩展名tsx和ts添加到Webpack配置（开发和生产）中的extensions表。
1.添加ts-loader。下面是一个示例

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

1.将eslint更改为tslint
1.添加source-map-loader以获得调试Typescript文件的可能性。

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

1.创建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).重新启动开发服务器！
享受：）

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).添加tsconfig.json
运行npx tsc --init
3).将其添加到tsconfig

"compilerOptions": {

"jsx": "react-jsx", // this line

现在，您可以将tsx集成到现有项目中😊