Angular12使用Module augmentation扩展AbstractControl时VS Code报错如何解决？

你遇到的是TypeScript模块作用域识别的规则问题，具体原因和解决方案如下：

根本原因 #

TypeScript对文件类型有明确的划分规则：

• 如果一个文件顶层没有任何import/export语句，TS会将其识别为全局脚本文件，所有声明都会落到全局作用域
• 如果文件顶层存在import/export语句，TS会将其识别为模块文件，所有声明仅在模块作用域内生效，此时的declare module 'xxx'语法会被识别为「模块扩展」，会和原有模块的类型做合并，而非覆盖

当你没有写那行AbstractControl导入时，你的扩展文件属于全局脚本，你写的declare module '@angular/forms'会被TS判定为要完全重写@angular/forms模块的所有类型定义，直接覆盖了Angular官方的forms模块类型，自然就会出现一堆找不到原有API的错误。

未使用导入的优化方案 #

你可以改用TypeScript 3.8及以上支持的类型导入写法，既明确这个导入仅用于类型解析、不会产生实际运行时依赖，也可以避免部分编辑器误报未使用导入：

import type { AbstractControl } from '@angular/forms';

declare module '@angular/forms' {
  export interface AbstractControl {
    metadata: Map<string, any>[];
  }
}

额外注意事项 #

• 确认你的tsconfig.json的include配置项包含了这个扩展文件所在的路径，否则TypeScript不会加载该文件的类型声明，扩展的属性还是会提示不存在
• 不要保留多个重复的模块扩展文件，避免出现意外的类型冲突

内容的提问来源于stack exchange，提问作者Mançaux Pierre-Alexandre