Typescript已经是React项目中不可或缺的开发工具。

主要新增了数据结构与类型声明，用于解决项目维护困难的问题。

下面看看在react中如何引入Typescript

一、新建react + ts项目

npm create-react-app xxx --template typescript

二、已有react项目 + ts

1. 安装Typescript

全局安装

npm i typescript -g

当前项目安装

npm i typescript -D

2. 添加Typescript依赖

安装完成之后，需将ts依赖加入package.json，否则项目中无法引用。

npm i @types/react @types/react-dom

3. 生成tsconfig.json文件

tsc --init

4. 修改tsconfig.json文件

生成的tsconfig.json文件一般配置不全，需要修改成可用配置，参考如下配置：

{
  "compilerOptions": {
    "target": "es5",/**指定ECMAScript目标版本**/
    "jsx": "react",/**支持JSX**/
    "module": "esnext",/**指定生成哪个模块系统代码**/
    "allowJs": true,/**允许编译js文件**/
    "outDir": "build",/**编译输出目录**/
    "strict": true,/**启用所有严格类型检查选项**/
    "noImplicitAny": false,/**在表达式和声明上有隐含的any类型时报错**/
    "skipLibCheck": true,/**忽略所有的声明文件的类型检查**/
    "forceConsistentCasingInFileNames": true,/**禁止对同一个文件的不一致的引用**/
    "lib": [
      "dom",
      "es5",
      "es2015.core",
      "es2015.promise",
      "es2015.collection",
      "es2016.array.include",
      "es2017.string",
      "es2017.object",
      "es2018.promise",
      "es2015.reflect",
      "es2017.typedarrays",
      "dom.iterable",
      "esnext"
    ],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": [/**指定编译目录**/
    "src"
  ]
}

以步骤完成后，就可以正常使用新建ts文件进行代码编写。

本文参考：https://blog.csdn.net/weixin_43924228/article/details/112836396