如何在React项目中引入TypeScript？

一、新建项目使用TS

如果你是要新建一个使用TS的React项目，并且你是用脚手架Create React App去创建，那么就非常的容易，你只需要在创建的时候将命令改为：

create-react-app "你的项目的名称" --template typescript

create-react-app "你的项目的名称" --script-version=react-script-ts

二、已有项目引入TS

如果你是要在已有的React项目中引入TS或者你想创建一个新的React项目但是不想使用Create React App，那么你必须手动安装TS

1.项目下安装TS

npm install typescript --save-dev

2.初始化tsconfig配置文件，这会在项目下生成一个tsconfig.json的文件

tsc --init

如果执行以上命令提示：TypeScript tsc 不是内部或外部命令，也不是可运行的程序或批处理文件，解决办法 ：

1）npm config get prefix 查找npm安装目录

npm config get prefix

2）将返回的结果配置到环境变量里的系统变量：

3）配置用户变量 和 系统变量 里的path：

点击【编辑】在末尾添加上 %NODE_PATH%， 确定保存。

3.配置tsconfig.json，更多的配置可以查看TS官网文档

{
  "compilerOptions": {
     "target": "es5", /**指定ECMAScript目标版本**/                  
     "module": "commonjs", /**指定生成哪个模块系统代码**/
     "allowJs": true,  /**允许编译js文件**/                    
     "jsx": "react",  /**告诉TypeScript：JSX代码是React代码**/                 
     "outDir": "build",  /**编译输出目录**/
     "noEmit": false,   
     "strict": true, /**启用所有严格类型检查选项**/
     "noImplicitAny": false, /**在表达式和声明上有隐含的any类型时报错**/         
     "skipLibCheck": true,  /**忽略所有的声明文件的类型检查**/                  
     "forceConsistentCasingInFileNames": true   /**禁止对同一个文件的不一致的引用**/  
  },
  "include": ["src"] /**指定编译目录**/
}

需要注意的是官网使用的是"rootDir": “src”，但是由于我的项目的配置文件都是弹出来的，所以有些文件并没有在src的目录下，配置这个打包就报错了，所以我这里使用的是"include": [“src”]，在此基础上，还可以通过exclude来排除某些文件或目录。

4.安装react的声明文件

npm install --save @types/react @types/react-dom

@types/react 是 TypeScript 的一个类型定义包，它为 React 库提供了 TypeScript 类型声明。当你使用 TypeScript 编写一个基于 React 的项目时，这个包可以帮助你获得更好的类型检查和自动补全功能。

@types/react-dom 是为 React 的 DOM 渲染库 react-dom 提供的 TypeScript 类型定义包。 

5.如果你完全没有依靠Create React App来创建项目，那没你还需要安装配置ts-loader或者babel-loader来对 .ts、.tsx 文件进行处理，具体的配置可以查看webpack官网。

如果你使用的是ts-loader，配置可能如下所示：

module.exports = {  
  // ... 其他配置 ...  
  module: {  
    rules: [  
      // ... 其他规则 ...  
      {  
        test: /\.(ts|tsx)$/,  
        exclude: /node_modules/,  
        use: 'ts-loader',  
      },  
    ],  
  },  
  resolve: {  
    extensions: ['.tsx', '.ts', '.js'],  
  },  
  // ... 其他配置 ...  
};

如果你选择使用Babel，你需要配置babel-loader，并添加@babel/preset-typescript作为preset：

module.exports = {  
  // ... 其他配置 ...  
  module: {  
    rules: [  
      // ... 其他规则 ...  
      {  
        test: /\.(ts|tsx)$/,  
        exclude: /node_modules/,  
        use: {  
          loader: 'babel-loader',  
          options: {  
            presets: [  
              '@babel/preset-env',  
              '@babel/preset-react',  
              '@babel/preset-typescript',  
            ],  
          },  
        },  
      },  
    ],  
  },  
  resolve: {  
    extensions: ['.tsx', '.ts', '.js'],  
  },  
  // ... 其他配置 ...  
};

 6.之后就可以愉快的使用TS来开发React了