迁移至NX时@typescript-eslint/no-unsafe-assignment规则异常

问题背景 #

项目迁移至NX后，执行npx nx lint my-app时，environment.staging.ts触发@typescript-eslint相关错误，但结构完全一致的environment.ts却能正常通过检查。

环境文件结构 #

• apps/my-app/src/environments/
  • environment.model.ts
  • environment.development.ts
  • environment.staging.ts
  • environment.ts

核心文件代码 #

environment.model.ts #

import { CanActivateFn } from '@angular/router';
export type Env = 'production' | 'staging' | 'develop';
export interface EnvironmentModel {
  mode: Env;
  path: string;
  websocketPath: string;
  authGuards: CanActivateFn[];
}

报错的environment.staging.ts #

import { oidcActivate } from '../app/guard/auth.guard';
import { EnvironmentModel } from './environment.model';
export const environment: EnvironmentModel = {
  mode: 'develop',
  path: window.location.origin,
  websocketPath: `wss://${window.location.host}`,
  authGuards: [oidcActivate],
};

正常通过的environment.ts #

import { dropRouting } from '../app/guard/auth.guard';
import { EnvironmentModel } from './environment.model';
export const environment: EnvironmentModel = {
  mode: 'production',
  path: window.location.origin,
  websocketPath: `wss://${window.location.host}`,
  authGuards: [dropRouting],
};

Lint错误详情 #

..../apps/my-app/src/environments/environment.staging.ts
  5:3   error  Unsafe assignment of an `any` value                @typescript-eslint/no-unsafe-assignment
  5:9   error  Unsafe member access .location on an `any` value   @typescript-eslint/no-unsafe-member-access
  6:27  error  Invalid type "any" of template literal expression  @typescript-eslint/restrict-template-expressions
  6:27  error  Unsafe member access .location on an `any` value   @typescript-eslint/no-unsafe-member-access

补充守卫代码：oidcActivate #

export const oidcActivate: CanActivateFn = () => {
  const oidcSecurityService = inject(OidcSecurityService);
  const router = inject(Router);

 return oidcSecurityService.isAuthenticated$.pipe(
    take(1),
    map(({ isAuthenticated }) => {
      if (!isAuthenticated) {
        window.localStorage.setItem('redirect', window.location.pathname);
        return router.parseUrl('/callback-auth');
      }
      return true;
    })
  );
};

问题原因 #

1. NX默认配置差异：NX对默认生产环境文件environment.ts有特殊处理，自动引入DOM类型支持；而自定义的environment.staging.ts未被纳入该规则，导致TypeScript无法识别window对象的类型，将其推断为any。
2. TS配置覆盖范围不足：项目tsconfig.json中的lib配置可能未覆盖所有环境文件，导致staging环境文件缺少DOM类型定义。

解决方案 #

方案1：全局声明window类型 #

在environment.staging.ts顶部添加全局类型声明，强制TypeScript识别window的DOM类型：

declare global {
  interface Window {
    location: Location;
  }
}

方案2：统一TS配置，添加DOM库 #

修改apps/my-app/tsconfig.json的compilerOptions.lib，确保包含dom库，覆盖所有环境文件：

{
  "compilerOptions": {
    "lib": ["dom", "es2020"]
    // 其他配置项...
  }
}

方案3：类型断言强制指定类型 #

在使用window.location时添加类型断言，明确告知TypeScript其类型：

export const environment: EnvironmentModel = {
  mode: 'staging', // 注意：此处原代码mode值错误，应改为'staging'而非'develop'
  path: (window.location as Location).origin,
  websocketPath: `wss://${(window.location as Location).host}`,
  authGuards: [oidcActivate],
};

方案4：Lint规则豁免（临时方案） #

若需快速绕过检查，可在.eslintrc.json中添加规则豁免，同时包含environment.ts和environment.staging.ts：

{
  "overrides": [
    {
      "files": ["environment.ts", "environment.staging.ts"],
      "rules": {
        "@typescript-eslint/no-unsafe-assignment": "off",
        "@typescript-eslint/no-unsafe-member-access": "off",
        "@typescript-eslint/restrict-template-expressions": "off"
      }
    }
  ]
}

额外提示 #

优先采用方案2，从根源上解决类型支持问题；同时务必修正environment.staging.ts中的mode字段值，否则会导致环境标识错误，影响后续逻辑判断。

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