TypeScript ESLint 中类型导入规则的正确配置与使用

TypeScript ESLint 项目中的 consistent-type-imports 和 consistent-type-exports 规则是用于规范类型导入/导出语法的重要工具。本文将深入解析这些规则的正确配置方式，帮助开发者避免常见误区。

规则的核心功能

这两个规则的主要目的是强制开发者在导入或导出类型时保持一致的语法风格。TypeScript 3.8 引入了类型导入语法，允许开发者明确区分类型导入和值导入。

常见配置误区

许多开发者会遇到这样的困惑：为什么配置了 fixStyle: 'separate-type-imports' 却没有得到预期的效果？实际上，这与规则之间的交互有关。

正确的配置方法

要实现将类型导入与普通导入分离的效果，需要同时配置以下两个规则：

1. @typescript-eslint/consistent-type-imports
2. @typescript-eslint/consistent-type-specifier-style

完整的配置示例如下：

{
  "@typescript-eslint/consistent-type-imports": "error",
  "@typescript-eslint/consistent-type-specifier-style": ["error", "prefer-top-level"]
}

规则效果对比

错误示例：

import { type User, type Post } from './types';

正确修正后：

import type { User, Post } from './types';

最佳实践建议

1. 始终同时配置这两个相关规则
2. 在团队中统一约定使用 prefer-top-level 风格
3. 定期运行 ESLint 的自动修复功能保持代码一致性
4. 在新项目中尽早引入这些规则，避免后期大规模重构

通过正确配置这些规则，可以显著提高代码的可读性和维护性，同时避免潜在的运行时性能问题。