TypeScript 如何配置 @typescript-eslint 规则

在本文中，我们将介绍如何配置 @typescript-eslint 规则来对 TypeScript 代码进行静态分析和规范检查。@typescript-eslint 是一个独立的 TypeScript 语法解析器，它可以帮助我们检测代码中的错误、潜在的问题以及风格违规。

阅读更多：TypeScript 教程

@typescript-eslint 的安装和配置

首先，我们需要安装 @typescript-eslint 的相关依赖包。在项目根目录下执行以下命令：

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

安装完成后，我们需要在项目的 ESLint 配置文件中进行相关配置。

假设我们的配置文件名为 .eslintrc.js，在其中添加以下内容：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    // 在这里添加自定义规则
  },
};

parser 指定使用 @typescript-eslint/parser 作为解析器；
parserOptions.project 指定 TypeScript 项目的 tsconfig.json 文件路径，这样 @typescript-eslint 就能获得正确的类型信息；
plugins 添加 @typescript-eslint 插件；
extends 添加 @typescript-eslint/recommended 规则集，它是官方提供的推荐配置；
rules 可以在这里添加自定义规则。

@typescript-eslint 规则的配置

@typescript-eslint 提供了大量的规则供我们使用。这些规则可以用来检查代码中的一些常见问题，例如变量未使用、错误的类型注解、类型检查断言、禁止使用某些特定的 TypeScript 语法等等。

以下是一些常用的 @typescript-eslint 规则示例：

@typescript-eslint/no-unused-vars：禁止定义未使用的变量。示例配置："no-unused-vars": "error"；
@typescript-eslint/explicit-module-boundary-types：要求明确导出函数和类的公共 API 的类型注解。示例配置："explicit-module-boundary-types": "error"；
@typescript-eslint/no-explicit-any：禁止使用 any 类型。示例配置："no-explicit-any": "error"；
@typescript-eslint/require-await：要求 async 函数必须带有 await 关键字。示例配置："require-await": "error"；
@typescript-eslint/no-non-null-assertion：禁止使用非空断言操作符 !。示例配置："no-non-null-assertion": "error"。

通过在 .eslintrc.js 中的 rules 配置下添加这些规则，我们可以对 TypeScript 代码进行规范检查。

除了以上示例，@typescript-eslint 还提供了许多其他规则，开发者可以根据实际需求进行配置。更多的规则可以在官方文档中找到。

使用 @typescript-eslint 解决实际问题

@typescript-eslint 的规则可以帮助我们发现代码中的潜在问题，提高代码的质量和可维护性。下面是一些使用 @typescript-eslint 解决实际问题的示例。

示例一：未使用的变量

在 TypeScript 代码中，经常会遇到定义了但未使用的变量。这可能是由于代码重构或误操作导致的。使用 @typescript-eslint 的 @typescript-eslint/no-unused-vars 规则，我们可以很容易地发现并解决这些问题。

假设我们有以下代码：

function calculateSum(a: number, b: number): number {
  const result = a + b;
  return result;
}

通过配置 @typescript-eslint/no-unused-vars 规则，并在 ESLint 中运行检查命令，我们可以得到以下结果：

3:11  warning  'result' is defined but never used  @typescript-eslint/no-unused-vars

从警告信息中可以看到，变量 result 已经被定义但未使用。根据实际情况，我们可以选择删除该变量或者使用它。

示例二：明确导出函数和类的公共 API 的类型注解

在 TypeScript 中，我们通常需要明确导出函数和类的公共 API 的类型注解，以便在使用这些 API 时能够得到正确的类型检查和代码提示。使用 @typescript-eslint 的 @typescript-eslint/explicit-module-boundary-types 规则，我们可以强制执行这一规范。

假设我们有以下代码：

export const calculateSum = (a, b) => a + b;

export class Calculator {
  add(a, b) {
    return a + b;
  }
}

通过配置 @typescript-eslint/explicit-module-boundary-types 规则，并在 ESLint 中运行检查命令，我们可以得到以下结果：

1:24   warning  Unexpected any. Specify a different type  @typescript-eslint/explicit-module-boundary-types
4:10   warning  Unexpected any. Specify a different type  @typescript-eslint/explicit-module-boundary-types
7:6    warning  Unexpected any. Specify a different type  @typescript-eslint/explicit-module-boundary-types

从警告信息中可以看到，我们没有明确给函数的参数和返回值添加类型注解，导致产生了警告。根据实际情况，我们可以为这些函数添加类型注解，以遵循规范。

总结

通过本文，我们了解了如何配置 @typescript-eslint 规则来进行 TypeScript 代码静态分析和规范检查。我们可以通过安装和配置 @typescript-eslint 的相关依赖包，并在项目的 ESLint 配置文件中进行相应的配置。然后，我们可以根据实际需求选择和配置不同的 @typescript-eslint 规则，使用它们来解决实际问题，提高代码的质量和可维护性。

希望本文对你在使用 @typescript-eslint 进行代码检查时有所帮助！