webpack搭建React项目（7）

安装 TS

yarn add typescript -D

安装@types的类型声明包。当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能，声明文件是以index.d.ts的一个文件，一般放在项目的根目录中，或者可以通过package.json中的typings/types属性来指定项目中声明文件的位置。

获取一个库类型声明文件有两种方式：

• 一种是该库包含了自己的声明文件，即包含了index.d.ts文件，这样的第三方库在使用的时候只需要安装库本身就可以了；
• 另一种是通过 TypeScript 提供的 DefinitelyTyped 仓库获取本身没有包含声明文件的第三方库的声明文件

React 库本身没有包含声明文件，需要通过安装@types类型声明包才可以：

yarn add @types/react @types/react-dom -D

可以看到@types/react中只包含了 React 相关的声明文件而已。

项目配置

使用yarn run tsc --init可以自动在当前终端打开的项目目录生成一个tsconfig.json文件，也可以直接手动创建这个文件，具体的配置项参见 —— TSConfig 参考

这个文件指定了项目根文件和编译项目所需的编译器配置，例如指定需要编译的文件夹include，忽略编译部分文件夹exclude，以及压缩编译的具体配置等compilerOptions

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build", "dll", "public"]
}

配置 webpack

TypeScript 具有特定的文件格式，例如ts或者tsx；webpack 需要安装额外的 loader 来解析他们，babel 7 之前的解决方案是通过安装ts-loader或者awesome-typescript-loader，在项目已经存在 babel 编译器的时候，这样的编译流程是冗余的，一份tsx代码经历的是tsx->ts-loader->js->babel-loader-js这样的流程，也就是一份 JS 文件需要被两个 loader 处理；于是从 babel 7 开始引入了@babel/preset-typescript，可以很方便的利用 babel 来编译所有 JS 相关的代码了。

yarn add @babel/preset-typescript -D

@babel/preset-typescript只包含一个 plugin —— @babel/plugin-transform-typescript，该 plugin 的配置项如下

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                modules: false,
              },
            ],
            ['@babel/preset-react'],
            ['@babel/preset-typescript'],
          ],
        },
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx'],
  },
};

注意事项

@babel/preset-typescript不支持const enum语法，解决方法如下：

• 使用babel-plugin-const-enum
• 移除const声明

@babel/preset-typescript不支持 TypeScript 特定的export =和import =语法，解决方法如下：

• 使用babel-plugin-replace-ts-export-assignment
• 使用 ES Module 的export default或者export const替换export =语法；使用import xxx from xxx替换import =语法

对于使用了 webpack 的resolve.alias配置模块路径别名的，需要在tsconfig.json中配置以下两个参数：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

修改项目

重命名项目文件为ts或者tsx后缀，这样 TS 的类型提示就会生效了