前言
当我们在编写 TypeScript 代码时，无论是单人项目还是团队协作开发，都希望代码的质量能够得到保障，这样做能够减少由于低劣代码导致的错误和 bug，提高代码的可维护性和可读性。本文将介绍使用 typescript-eslint 对 TypeScript 代码进行检查，以此来更好地保障代码的质量。
什么是 typescript-eslint？
typescript-eslint 是一个对 TypeScript 代码进行静态分析和语法检查的工具，它是在 ESLint 的基础上进行了扩展，支持了 TypeScript 语法的检查和转换。具体来说，它会分析 TypeScript 代码的语法结构，并根据你配置的规则来检查代码是否符合标准，检查到不符合标准或有潜在问题时会给出相应的提示或警告。
typescript-eslint 的安装
要使用 typescript-eslint 进行代码检查，需要先安装相关的 npm 包：
npm i eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
其中：
eslint是用来做代码式检查的 npm 包；@typescript-eslint/eslint-plugin是用来对 TypeScript 代码进行检查的 npm 包；@typescript-eslint/parser是用来解析 TypeScript 代码的 npm 包。
安装完这三个包以后，我们就可以开始对 TypeScript 代码进行检查了。
typescript-eslint 的配置
- 初始化 .eslintrc 配置文件
npx eslint --init
该命令会在项目根目录下生成一个 .eslintrc.js 文件，也可以手动创建。具体配置如下：
-- -------------------- ---- ------- -------------- - - ------- ---------------------------- -- -- ---------- -- -------- - ---------------------------------------- ------------------------------ ------------------------------ -- -- ------- -------------- - ---- ----- --------------- ----- ------------ ----- -- --- ---------- -- ----------- --------- -- -------- -- -------- ---------------------- ------------ -- ---- ------ --- -- ---- --展开代码
- 配置插件
在 .eslintrc.js 中配置插件，具体如下：
plugins: ["@typescript-eslint", "prettier"], // 插件列表
其中，@typescript-eslint 是 typescript-eslint 的插件。prettier 是用来自动格式化代码风格，规定代码应该保持的样式。这两者都可以根据需求安装和配置。
- 配置规则
接下来是最关键的一步，即配置规则，该规则会影响我们 TypeScript 代码的检查效果。在 .eslintrc.js 中配置规则，具体如下：
-- -------------------- ---- ------- -------------- - - -- ---------- ------ - --------------------------------------------------- ------ -- ----------------- ------------------------------------ ---------- -- -------- ------------------------------------- ------ -- ------- --- -------------------- -------- -- ------- -- --展开代码
该配置文件中声明了几个规则，代表的意思分别是：
@typescript-eslint/explicit-function-return-type如果函数没有设置返回值类型，则提示开发者显式地声明函数返回类型。@typescript-eslint/no-unused-vars如果变量未使用，则提示开发者。@typescript-eslint/no-explicit-any变量不允许使用any类型的值。prettier/prettier自动格式化代码，保持代码风格的一致性。
案例示例
下面是一个 TypeScript 代码片段：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- - -------- ----------------- ----- - ------ ---- -- ---- -- ------------- --- ----------- ----- ------ - ----- ----- ---- - - ----- -------- ---- -- -- -------------------------------展开代码
上述代码定义了一个接口 User，表示用户的基本信息，并实现了一个函数 getUserInfo，通过接收一个 User 类型的对象参数，返回一个字符串，内容包含了用户的基本信息。最后定义了一个变量 user，它是一个 User 类型的对象，并将其作为参数传递给 getUserInfo 函数输出。
下面是该 TypeScript 代码通过 typescript-eslint 进行代码检查后的结果：
~/Demo $ npx eslint index.ts ~/Demo/index.ts 1:1 warning Missing return type on function @typescript-eslint/explicit-function-return-type 6:1 warning 'user' is defined but never used @typescript-eslint/no-unused-vars ✖ 2 problems (0 errors, 2 warnings)
上述结果，分别就是开启了 @typescript-eslint/explicit-function-return-type 和 @typescript-eslint/no-unused-vars 两个规则以后给出的警告信息，它们分别对应上述示例代码的 getUserInfo 函数和 user 变量。
小结
typescript-eslint 是一个非常好的类型安全的代码验证工具，它能够通过提供灵活性配置选项，并检查 TypeScript 代码中的许多常见问题，大大提高我们代码的可维护性和可读性。本文介绍了 typescript-eslint 的安装、配置和一个简单示例用法，期望能够帮助更多开发者提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c28699314edc2684bdb571
