React+TypeScript项目构建的两种实现方式与配置详解

React集成TypeScript的两种构建方案概述

React项目的构建过程本身并不复杂，当引入TypeScript时，只要遵循官方指南，操作依然清晰明了。目前主要有两种主流方案可供选择：

直接创建TypeScript模板项目

第一种方案是直接创建一个原生支持TypeScript的React项目。在创建过程中，必须显式指定模板参数，不能使用默认的cra-template，而应使用cra-template-typescript模板以确保项目结构正确。

npx create-react-app tsreactdemo --template typescript

项目创建成功后的提示信息与常规React项目类似。进入项目目录后，执行yarn start或npm start即可启动开发服务器。

在启动项目前，建议先检查文件结构。默认情况下，项目会生成tsconfig.json配置文件，且src目录下的默认入口文件index.js和App.js已自动转换为TypeScript版本，即index.tsx和App.tsx。

查看package.json文件中的依赖列表，可以发现与标准React项目相比，额外引入了以下类型定义包：

具体新增的依赖包括@types/jest、@types/node、@types/react以及@types/react-dom，这些包为TypeScript提供了必要的类型支持。

早期版本中，创建TypeScript React项目的命令似乎是npx create-react-app xxx --typescript，但当前版本已不再支持此写法。现在必须使用--template typescript参数，而非--typescript。这并非操作错误，而是官方工具的迭代更新。前端技术更新迅速，若一两年不跟进学习，原有认知可能会被颠覆。需要注意的是，使用--typescript参数不会报错，但会默认创建普通React项目，不包含TypeScript相关配置。

此外，官方文档建议不要全局安装create-react-app工具。在最新版本中，直接使用npx create-react-app即可创建最新的React项目。如果已全局安装且版本较旧，可能会创建出过时的React项目，建议通过npm uninstall -g create-react-app卸载全局安装。

现有项目手动添加TypeScript依赖

第二种方案是在已有的React项目基础上，手动添加TypeScript相关依赖。

npm install typescript @types/react --save

首先创建一个标准的React项目：

在命令中直接加上--typescript参数，这是早期推荐的方式。虽然当前版本下此参数不再生效，但不会报错，最终创建的是使用cra-template模板的标准React项目。

接下来，手动添加TypeScript依赖：

只需添加这些依赖，无需手动创建tsconfig.json文件，项目即可正常运行，这相当于仅增加了依赖而未对项目结构进行大规模修改。

当将index.js和App.js重命名为index.tsx和App.tsx后，执行npm start或yarn start，系统会自动生成tsconfig.json文件。这是官方明确说明的行为，因此无需手动创建该配置文件。

查看自动生成的tsconfig.json文件内容，可以看到以下配置：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

手动创建的配置文件大致与此相同，因此直接利用系统自动生成更为便捷。

至此，关于React结合TypeScript进行项目构建的案例讲解完毕。如需了解更多相关内容，可搜索本站过往文章或继续阅读后续文章，感谢支持！