TypeScript的开发环境配置

从ts文件到浏览器可用的js文件，实际经过了两个步骤：从ts编译到js文件，从js文件（可能用了es6语法）编译到浏览器可用版本。第一步ts文件的编译是固定的，需要webpack配置loader、配置tsconfig.json，第二步，一般就使用babel-loader，需要配置babelrc文件。

官方starter

webpack配置

配置webpack，解析.ts/tsx文件 babel6不能解析TypeScript文件，需要配合ts-loader使用

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // ...
        loader: "babel-loader"
      },
      {        test: /\.ts$/,        use: "ts-loader"      },    ]
  }
}

babel7可以直接编译TypeScript文件，可以把ts-loader干掉。新坑用这个就没问题了。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,        // ...
        loader: "babel-loader"
      },
    ]
  }
}

babel配置

babel配置文件.babelrc.js

module.exports = {
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    'react-hot-loader/babel'
  ],
  presets: [
    ['@babel/preset-env', { targets: { browsers: 'last 2 versions' } }],
    '@babel/preset-typescript',
    '@babel/preset-react'
  ]
};

tsconfig.json配置

tsconfig.json是TypeScript的配置文件，用于指定该目录下文件的编译方式，例如包括哪些文件、排除，编译选项（目标代码版本、module方式、jsx配置等）。要注意的是，并不是webpack要使用，而是TypeScript编译器使用。例如直接通过tsc命令也可以编译。

在根目录直接输入tsc回车，或者编译单个文件（命令行同名选项会覆盖config配置） tsc --outFile index.js --target es5 --module amd index.ts

一个tsconfig.json例子

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@common/*": ["src/common/*"],
    }
  },
  "include": ["src"],
  "compileOnSave": false
}

经过上面的配置，就可以正常编译出js文件了。

启用类型检查

但是TS的特性，例如类型检查并不支持，编译都会成功，因为eslint是在js编译过程使用的。

这个和tsconfig.json里配置了paths一样，在ts文件里使用这个别名没问题，但是编译会出错，原因就是js编译的时候并不能取得这个别名，需要配置resolve.alias。

启用类型检查，可以在package.json里使用命令

scripts: {
  "type-check": "tsc --noEmit",
  "type-check:watch": "npm run type-check -- --watch",
}

就可以使用类型检查，正常排除错误。但是单独起一个进程来检查有点不合算，而且两边结果不一致，看着也很别扭。可以使用fork-ts-checker-webpack-plugin插件来做到这个。

module.exports = {
  // ...
  plugins: [
    // ...
    new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: "./src/**/*",
      },
    }),
  ]
}

fork-ts-checker-webpack-plugin创建了一个新的进程，专门进行TS的类型检查。async设置为false的意思是，要求webpack同步等待这个插件完成检查，然后再返回结果信息。

如果启用了dev-server，可以看到，warning等信息会实时显示在devTools控制台。如果不想要这些输出，可以配置webpack-dev-server的log等级：

module.exports = {
  devServer: {
    // ...
    clientLogLevel: 'error'
  }
}