将Angular CLI迁移至NX单体仓库后遭遇大量TS类型不匹配错误

问题背景 #

将Angular CLI项目迁移至NX工作区单体仓库，修复所有导入错误后项目可正常编译运行，但出现100余条TypeScript类型不匹配错误，部分错误示例：

'myvariable' is possibly 'null'.
Type 'null' is not assignable to type 'IMyInterface'.
Type 'string | null' is not assignable to type 'string'.
Type 'null' is not assignable to type 'SafeHtml'.
Type 'Observable<(myType| null)[]>' is not assignable to type 'Observable<myType[]>'.
Type 'MatTableDataSource<T, MatTableDataSourcePaginator>' is not assignable to type 'MatTableDataSource<never, MatTableDataSourcePaginator>'.
Type 'T[]' is not assignable to type 'never[]'.
Type 'T' is not assignable to type 'never'.
Type 'any' is not assignable to type 'never'.

已尝试关闭严格模式，相关tsconfig配置如下：

tsconfig.app.json

{"extends": "../../tsconfig.base.json",
 "compilerOptions": {
  "outDir": "../../dist/out-tsc"
 },
 "files": ["src/main.ts", "src/polyfills.ts"],
 "include": ["src/**/*.d.ts"]
}

tsconfig.base.json

{"compileOnSave": false,
 "compilerOptions": {
 "baseUrl": ".",
 "outDir": "./dist/out-tsc",
 "forceConsistentCasingInFileNames": false,
 "strict": false,
 "noImplicitOverride": true,
 "noImplicitUseStrict": true,
 "noPropertyAccessFromIndexSignature": true,
 "noImplicitReturns": false,
"noFallthroughCasesInSwitch": false,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"noImplicitAny": false,
"strictNullChecks": false,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": ["ES2022", "dom"],
"esModuleInterop": true,
"paths": {
  "@app/environment": ["src/environments/environment.ts"],
  "@app/state": ["src/app/state/index"],
  "@app/state/*": ["src/app/state/*"],
  "crypto": ["node_modules/crypto-browserify"],
  "stream": ["node_modules/stream-browserify"],
  "util": ["node_modules/node-util"]
},
"rootDir": "."
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": false,
"strictInputAccessModifiers": false,
"strictTemplates": false
},
"exclude": ["node_modules", "tmp"],
"include": ["src/**/*.d.ts"],
"files": ["src/main.ts", "src/polyfills.ts"],
"types": ["jest"]
}

项目规模较大，无法逐个处理错误，寻求批量修复方案。

批量修复方案 #

一、先确认配置是否真正生效 #

• 检查项目级tsconfig：部分NX子项目可能有单独的tsconfig.json，确认它是否正确extends了tsconfig.base.json，且没有在项目配置中重新开启strict、strictNullChecks等严格选项。
• 清理NX缓存：执行nx reset清空缓存后重新编译，避免旧配置缓存导致关闭严格模式的设置未生效。

二、批量处理空值类型不兼容问题 #

这类错误占比最高，可通过以下方式批量处理：

1. 全局替换添加非空断言
   对于明确不会为null的变量，用IDE的全局替换功能批量添加非空断言!：

   • 比如针对DOM元素获取操作，将document.getElementById('.*?')（正则匹配）替换为document.getElementById('$1')!；
   • 针对变量使用场景，配合上下文筛选后将myvariable替换为myvariable!。

2. 全局类型扩展临时兼容
   在项目根目录创建src/typings.d.ts，添加全局类型扩展让null/undefined与对应类型兼容（适合临时过渡，后续建议逐步清理）：

   declare global {
     type Nullable<T> = T | null | undefined;
     // 让基础类型自动兼容空值
     type string = String | null | undefined;
     type number = Number | null | undefined;
     type boolean = Boolean | null | undefined;
   }
   export {};
   

3. 通用RxJS操作符过滤数组空值
   针对Observable<(T|null)[]>转Observable<T[]>的错误，创建通用操作符批量过滤空值：

   import { pipe } from 'rxjs';
   import { filter, map } from 'rxjs/operators';
   
   export const filterNullish = pipe(
     map((items: (T | null | undefined)[]) => items.filter(item => item != null) as T[])
   );
   

   然后用IDE全局替换，将Observable管道中的.pipe(map(替换为.pipe(filterNullish(), map(，批量处理数据流中的空值问题。

三、批量处理never类型相关错误 #

1. 修复泛型推断缺失
   对于MatTableDataSource<T>被推断为never的问题，全局搜索new MatTableDataSource()，替换为明确指定泛型的写法：

   • 比如替换为new MatTableDataSource<YourDataType>()，其中YourDataType是表格对应的实体类型。

2. 临时放宽泛型约束
   在全局类型声明文件中扩展第三方库的泛型约束，避免never推断：

   declare module '@angular/material/table' {
     interface MatTableDataSource<T = any> {
       data: T[];
     }
   }
   

   这会让MatTableDataSource默认使用any类型，快速消除错误，后续再逐步替换为具体类型。

四、利用工具自动修复 #

• TypeScript自动修复命令：执行nx run your-project-name:build --fix（替换为你的NX项目名称），TypeScript会自动修复部分简单类型错误，比如添加非空断言、调整类型兼容。
• IDE批量修复：在VS Code的“问题”面板中，选中同类型的错误（比如所有is possibly null错误），右键选择“修复所有选中的问题”，批量处理同类型错误。

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