引入静态检查工具 ESLint

虽然 TypeScript 可以进行类型检查，但无法检查代码是否符合规范。代码是否符合规范可以由人工进行评审，也可以用工具进行自动检查，以减少人工投入。

ESLint 是一个自动化的静态代码检查工具，用于检测代码是否符合指定的规范。使用它可以让开发人员在编码的过程中就发现问题，而不是在执行的过程中才发现问题。

ESLint 的安装与应用

要在 TypeScript 中使用 ESLint，需先执行以下命令安装 ESLint 及用于 TypeScript 的 ESLint 扩展。

$ npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

上述命令将分别以发布到开发环境（-D 参数，其作用等同于 -save-dev 参数）的形式安装以下 3 个包。

eslint：ESLint 的核心包。
@typescript-eslint/parser：ESLint 的代码解析器，用于解析 TypeScript 代码。
@typescript-eslint/eslint-plugin：ESLint 插件，包含预定义的 TypeScript 代码规范。

ESLint 需要配置文件来设定检查规则，配置文件名为固定的 .eslintrc。在项目的根目录下创建名为 .eslintrc 的文件即可，文件内容如下。

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ]
}

以上代码中各部分的含义如下。

root：表示该配置文件是否为根配置，填入 true。
parser：自定义代码解析器，填入先前用 npm 命令安装的 TypeScript 解析器。
plugins：ESLint 插件，填入先前用 npm 命令安装的 typescript-eslint 插件。
extends：设置 ESLint 或插件中包含的检查规则。
- “eslint:recommended”：ESLint 推荐的内置检查规则。
- “plugin:@typescript-eslint/eslint-recommended”：插件包含的规则之一，禁用了 eslint: recommended 提供了但 TypeScript 编译器已能够检查的一部分规则。
- “plugin:@typescript-eslint/recommended”：插件包含的规则之一，集成了一些推荐的检查规则。

并不是所有代码都要检查，例如，node_modules 目录下安装的包文件和测试代码可以不用检查。ESLint 使用固定名称为 .eslintignore 的配置文件来配置忽略检查的目录及文件。接下来，在项目根目录下创建名为 .eslintignore 的文件，文件内容如下。

node_modules
dist
testing

之后 ESLint 在检查时将忽略 node_modules、dist 和 testing 目录下的代码。

之后执行以下命令来检查 TypeScript 代码。

$ npx eslint . --ext .ts

如果终端没有任何输出，就说明代码完全符合代码规范。

假设 a.ts 文件如下。

let a: number = 1;
let b: boolean = true;

function isequal(a: any, b: any) {
    return a = b;
}

console.log(isequal(a, b));

ESLint 的检查结果如图20-1所示，可以看到 ESLint 检查到 4 个错误和两个警告，它们分别如下。

错误1：从赋值为数值就可以推断出变量类型为数值类型，可以移除类型声明。
错误2：变量 a 没有再次赋值，可以用 const 关键字将其声明为常量。
错误3：从赋值为布尔值就可以推断出变量类型为布尔类型，可以移除类型声明。
错误4：变量 b 没有再次赋值，可以用 const 关键字将其声明为常量。
警告1：发现非预期的 any 类型，请指明一个具体的类型。
警告2：发现非预期的 any 类型，请指明一个具体的类型。

Figure 1. 图20-1 ESLint的检查结果

此时，可以根据提示修复对应的代码，也可以取消不必要的检查规则。

配置检查规则

可以在 .eslintrc 配置文件的 rules 属性中，配置检查规则。关于 ESLint 的全部规则，请参见 ESLint 的官网。

ESLint 对每种规则都有以下 3 种设置。

off：代表关闭规则。
warn：代表打开规则，显示警告。
error：代表打开规则，显示错误。

例如，将上一节的代码中涉及的部分规则的设置变更为 off 或 error，并添加一条 no-console 规则，当代码中存在 console 时就会显示警告。更改后的 .eslintrc 配置文件如下。

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
        "@typescript-eslint/no-explicit-any": "error",
        "prefer-const": "off",
        "@typescript-eslint/no-inferrable-types": "off",
        "no-console": "warn"
    }
}

对上一节的示例代码执行 npx eslint . --ext .ts 命令，修改检查规则后的检查结果如图20-2所示。由于原本设置为 error 的 prefer-const 规则和 @typescript-eslint/no-inferrable-types 规则设置为 off，因此对应代码不再报错。而原本设置为 warn 的 @typescript-eslint/no-explicit-any 规则设置为 error，因此对应代码开始报错。而新增的 no-console 规则也开始生效，并显示了警告。它们分别如下。

错误1：发现非预期的 any 类型，请指明一个具体的类型。
错误2：发现非预期的 any 类型，请指明一个具体的类型。
警告：发现非预期的 console 语句。

Figure 2. 图20-2 修改检查规则后的检查结果