如何让项目支持Typescript

目标

• 支持ts转译
• 识别.ts、.tsx、.d.ts文件
• 编辑器语法检查和提示（vscode默认支持TypeScript语法，会根据tsconfig.json检查类型，并给出提示）
• eslint（tslint已经不再推荐）
• 支持JSX
• 使用react

实现

以webpack打包工具为例。

【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】

支持ts转译

webpack支持ts转译有两种方案：基于babel解析器和基于tsc解析。

基于babel

（查看官网或者npmjs或者github以更详细地了解相关工具）

babel主要通过@babel/preset-typescript预设 编译TypeScript代码。

先安装工具

npm install @babel/core babel-loader @babel/preset-typescript

进行相关配置

// webpack.config.js
module.exports = {
  	// ......other configure
    module: {
        rules: [
            {
                test: /.ts$/,
                use: ['babel-loader']
            }
        ]
    }
};

// .babelrc
{
    "presets": ["@babel/preset-typescript"]
}

babel不会读取tsconfig.json，它有自己的配置项，只有tsc才会读取tsconfig.json，另外babel-loader并不会进行类型检查，只是会去掉typescript中类型的部分。如果希望检查类型，需要使用其他工具（后面会说明）。虽然typeScript本身支持很多先进的es语法（如可选链）但是babel-loader的“@babel/preset-typescript”并不支持，所以还需要babel-preset配合。

使用babel-loader时候，目前不支持import moduleName = require('path')语法，推荐使用import moduleName from 'path';参考： https://github.com/babel/babel/issues/7062

由于babel-loader并不会进行TypeScript类型检查，因此我们需要其他的工具来进行类型检查。

fork-ts-checker-webpack-plugin这个插件可以用来进行typescript类型检查。这个插件也是依赖tsc进行代码转换的。

当前版本的create-react-app的TypeScript模板，就是使用@babel/preset-typescript + fork-ts-checker-webpack-plugin方案支持TypeScript的。

基于tsc

使用ts-loader，这个loader调用tsc编译TypeScript代码，并会进行类型检查。

使用很简单，把ts-loader配置到webpack的loaders中即可。

安装

npm install ts-loader

配置webpack

// webpack.config.js
module.exports = {
    // ......other configure
    module: {
        rules: [
            {
                test: /.ts$/,
                use: ['babel-loader', 'ts-loader']
            }
        ]
    }
};

注意配置tsconfig.json。

识别.ts、.tsx、.d.ts文件

配置webpack的resolve解析扩展名

module.exports = {
  	// ......other configure
    resolve: {
        extensions: ['.tsx', '.ts', '.d.ts']
    }
};

注意，如果webpack中配置了路径别名（resolve.alias），则需要在tsconfig.json中也配置一下，否则tsc会报错找不到模块。

eslint

eslint检查代码格式同样有两种方案，一种是babel方案，另一种是TypeScript社区的方案。

@babel/eslint-parser

@babel/eslint-parser

eslint的默认解析器无法解析一些新的语法，例如ts、flow。因此当你使用新语法，并且用babel解析时候，可以用@babel/eslint-parser代替eslint默认的parser。这样@babel/eslint-parser可以让eslint在babel转译过的代码上工作。

babel转译后语法再被解析为estree，这样对es语法的规则就可以进行校验了。校验的代码会和源码有对应关系，这样我们就能在格式不规范的代码上看到错误或者警告提示了。

和@babel/eslint-parser配套使用的是@babel/eslint-plugin，目前它不支持对ts语法进行格式化校验，因为ts社区已经做了相关工作，因此@babel的这个parser和plugin仅仅是用于新语法项目中的es语法格式化。如果需要对新语法格式进行提醒和校验，还是需要用其他的parser和plugin。

这里需要注意eslint-loader、eslint、@babel/eslint-parser、@babel/eslint-plugin之间的版本约束

安装工具

npm install eslint eslint-loader @babel/eslint-parser @babel/eslint-plugin

配置

// webpack.config.js
module.exports = {
  	// ......other configure
    module: {
        rules: [
            {
                test: /.ts$/,
                use: ['eslint-loader', 'babel-loader']
            }
        ]
    }
};

// .eslintrc
module.exports = {
    parser: "@babel/eslint-parser",
    plugins: ["@babel"],
    rules: {
        "@babel/new-cap": "error",
        "@babel/no-invalid-this": "error",
        "@babel/no-unused-expressions": "error",
        "@babel/object-curly-spacing": "error",
        "@babel/semi": "error"
      }
};

@typescript-eslint/parser

typescript-eslint

使用@typescript-eslint/parser 作为eslint的解析器，配套地使用@typescript-eslint/eslint-plugin 插件。

安装工具

npm install eslint eslint-loader @typescript-eslint/parser @typescript-eslint/eslint-plugin

配置

// webpack.config.js
module.exports = {
  	// ......other configure
    module: {
        rules: [
            {
                test: /.ts$/,
                use: ['eslint-loader', 'babel-loader']
            }
        ]
    }
};

// .eslintrc
module.exports = {
    parser: "@typescript-eslint/parser",
    plugins: ["@typescript-eslint/eslint-plugin"],
    rules: {
        "@typescript-eslint/await-thenable": "error",
        "@typescript-eslint/explicit-function-return-type": "error"
    },
    parserOptions: {
        project: "./tsconfig.json"
    }
};

@typescript-eslint/parser 可以解析ts语法，并将ts语法转成estree，因此eslint可以正常将es的格式规则校验。同时@typescript-eslint/eslint-plugin可以对ts语法格式规则进行校验。

实际项目推荐@typescript-eslint/进行校验。

代码提示配置好eslint后，还需要安装vscode的eslint插件，然后就能看到报错提示了。

JSX

支持解析JSX语法需要：

1. 文件以.tsx为后缀
2. 启用选项（通过tsconfig.json文件中设置compilerOptions.jsx为'react'来实现）

react

当前版本react使用js编写，因此需要安装其ts声明才能使用

npm install @types/react