Angular13升级后严格模式下FormGroup初始化及模式选择咨询

问题 #

原应用基于Angular 6开发，已通过新建Angular 13项目迁移代码的方式完成升级。当前tsconfig.json配置如下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false, // 原本计划设为true
    "noImplicitOverride": false, // 原本计划设为true
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": false,// 原本计划设为true
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

为临时让编译通过，曾将strict、noImplicitOverride、noImplicitReturns设为false。现在想要把strict设回true并修复相关错误，但无法正确初始化public formGroup: FormGroup;，尝试用new关键字也无效。当前TypeScript版本为~4.6.2，需解决FormGroup初始化问题，同时咨询开启strict模式是否合理。

解决方案 #

一、FormGroup初始化问题修复 #

当strict: true时，TypeScript强制要求所有类属性必须在声明时或构造函数中完成初始化，不允许留为未定义状态。针对FormGroup的初始化，有两种可靠修复方式：

1. 构造函数内初始化
   先确保正确导入FormGroup及所需表单控件，再在组件构造函数中完成初始化：

   import { FormGroup, FormControl } from '@angular/forms';
   
   export class YourComponent {
     public formGroup: FormGroup;
   
     constructor() {
       // 可初始化空表单，或带默认控件的表单
       this.formGroup = new FormGroup({
         username: new FormControl('')
       });
     }
   }
   

2. 声明时直接初始化
   若无需在构造函数中做额外逻辑，可直接在属性声明阶段完成初始化：

   import { FormGroup, FormControl } from '@angular/forms';
   
   export class YourComponent {
     public formGroup: FormGroup = new FormGroup({
       username: new FormControl('')
     });
   }
   

   若new FormGroup()无效，先排查以下几点：
   • 是否正确从@angular/forms导入FormGroup
   • @angular/forms包版本是否与Angular 13兼容（需为13.x.x版本）
   • 是否存在拼写错误（如Formgroup而非FormGroup）

二、开启strict模式的合理性建议 #

开启strict: true完全合理，甚至是Angular项目的最佳实践，原因如下：

• 提前拦截潜在bug：strict模式会强制检查类型安全、未初始化属性、空值处理等问题，避免运行时出现难以排查的错误，大型项目中优势尤为明显。
• 符合官方标准：Angular 12及以后版本默认开启strict模式，官方文档明确推荐保持该模式以提升代码质量。
• 降低长期维护成本：虽然初期需修复大量错误，但后续开发中能大幅减少类型相关bug，代码可读性、可维护性会显著提升。
• 平滑过渡方案：若当前错误过多，可分阶段开启strict子选项，降低修复难度：
  • 先开启strictNullChecks和strictPropertyInitialization（这两个是导致FormGroup初始化错误的核心选项）
  • 逐步修复相关错误后，再依次开启noImplicitOverride、noImplicitReturns等其他子选项
  • 最后将strict设为true

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