TSConfig路径别名引发ESLint类型安全报错问题排查

问题场景 #

我在服务文件里定义了一个简单方法：

// some-service.ts
export const getKey = (key: string) => key;

用~路径别名导入调用时，ESLint直接报错：

import * as someService from '~/shared/services/some-service';

// ESLint报错行
someService.getKey('test');

报错内容：

Unsafe call of an `any` typed value. (eslint@typescript-eslint/no-unsafe-call)
Unsafe member access .getKey on an `any` value. (eslint@typescript-eslint/no-unsafe-member-access)

换成相对路径导入就完全正常：

import * as someService from '../../services/some-service';

someService.getKey('test');

项目是monorepo结构，TS配置如下：

• 根目录tsconfig.json：

{
  "extends": "tsconfig/base.json"
}

• 应用目录./apps/my-app/tsconfig.json：

{
  "extends": "tsconfig/base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

使用的版本：

• Typescript v4.8.4
• ESLint v8.56.0
• @typescript-eslint/eslint-plugin v6.19.1

问题原因 #

ESLint的TypeScript插件无法自动识别TS配置里的paths别名规则，解析别名导入的模块时无法正确推导类型，只能把模块当成any类型处理，进而触发类型安全报错。

解决步骤 #

1. 安装依赖 #

安装eslint-import-resolver-typescript，这个包能让ESLint的导入解析器读取TS的paths配置：

npm install eslint-import-resolver-typescript --save-dev
# 或者用yarn
yarn add eslint-import-resolver-typescript -D

2. 配置ESLint #

修改ESLint配置文件（.eslintrc.js或.eslintrc.json），在settings中添加导入解析器配置，指定使用typescript解析器并指向当前应用的tsconfig.json路径：

{
  "settings": {
    "import/resolver": {
      "typescript": {
        "project": "./apps/my-app/tsconfig.json"
      }
    }
  }
}

如果monorepo里每个应用都有独立的ESLint配置，就给每个应用的.eslintrc添加这段配置，确保各自指向自己的tsconfig.json。

3. 验证效果 #

重启编辑器的ESLint插件或ESLint服务，查看代码，之前的类型安全报错应该会消失。

补充说明 #

• 确保每个应用的tsconfig.json中baseUrl和paths配置正确，~/*需准确映射到当前应用的src目录
• 如果根目录有共享ESLint配置，可以用overrides字段为不同应用分别指定tsconfig路径，无需每个应用单独修改配置

内容的提问来源于stack exchange，提问作者Kosmetika