Angular中如何配置ESLint/TS编译选项检测类变量拼写笔误

根因说明 #

TypeScript 默认不会对this上动态挂载的未声明属性做校验，no-use-before-define规则仅作用于独立声明的变量、函数、类，完全不覆盖类实例成员的访问场景，因此无法识别_Seal错写为_Seak这类笔误。

核心解决方式：配置TypeScript编译选项 #

这是覆盖这类问题最彻底的方案，不需要依赖额外ESLint规则：

1. 在项目tsconfig.json中开启严格模式，或单独开启对应校验选项：

   {
     "compilerOptions": {
       // 推荐直接开启全量严格模式，覆盖绝大多数类型校验场景
       "strict": true,
       // 若不需要全量严格模式，至少单独开启以下两项
       "noImplicitThis": true,
       "strictPropertyInitialization": true
     }
   }
   

2. 类的所有成员属性必须在类内部显式声明，禁止动态给this挂载未声明的属性。
   注意：不要给类添加[key: string]: any这类任意属性索引签名，否则会完全绕过TypeScript对类属性的存在性校验，所有拼写错误都无法被识别。

   修正后的示例代码结构如下：

   class Input {
     // 提前显式声明私有属性，TS会自动校验所有this上的属性访问
     private _Seal: string | null = null;
   
     public get Seal(): string {
       return this._Seal;
     }
   
     public set Seal(value: string) {
       if (typeof value === 'string'){
         // 此处若错写为this._Seak，TS会直接抛出编译错误：Property '_Seak' does not exist on type 'Input'
         this._Seal = value.toLowerCase();
       } else { 
         this._Seal = null; 
       }
     }
   }
   

   只要完成以上配置，所有类属性的拼写错误都会在编译阶段被直接拦截。

补充ESLint校验规则 #

如果需要额外加一层校验兜底，确保使用@typescript-eslint作为ESLint的TypeScript解析器和规则集后，开启以下规则：

• 开启@typescript-eslint/no-explicit-any：禁止使用any类型，避免因类型被标注为any绕过属性校验
• 开启@typescript-eslint/no-unsafe-member-access：禁止访问不安全类型的成员属性，防止未做类型校验的变量挂载属性漏检
• 可选开启@typescript-eslint/member-ordering：强制类的属性声明统一放在类结构最顶部，减少漏声明属性的概率

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