TS2564报错：属性'form'无初始化器且未在构造函数中明确赋值如何解决

这是TypeScript开启strictPropertyInitialization（严格属性初始化）校验规则后触发的TS2564错误，规则要求类的属性必须满足以下两种情况之一：

• 声明时直接赋予初始值
• 在类的构造函数内部完成赋值
  你的代码中form属性仅做了类型声明，赋值逻辑写在ngOnInit生命周期钩子中，TypeScript无法识别Angular生命周期的执行规则，无法确认form一定会被赋值，因此抛出错误。

下面是几种常用的解决方式，可根据你的业务场景选择：

• 方式1：添加非空断言操作符（最常用）
  在属性名后加!，显式告知TypeScript你会保证该属性一定会被赋值，无需TS做初始化校验：

  export class RegisterComponent implements OnInit {
    // 加!表示确认该属性一定会被赋值，不会为undefined
    form!: FormGroup; 
  
    constructor(
      private formBuilder: FormBuilder
    ) {}
  
    ngOnInit(): void {
      this.form = this.formBuilder.group({
        name: '',
        email: '',
        password: ''
      });
    }
  }
  

• 方式2：将赋值逻辑移到构造函数中
  把form的初始化逻辑从ngOnInit移到构造函数内，满足TS的初始化校验规则：

  export class RegisterComponent implements OnInit {
    form: FormGroup;
  
    constructor(
      private formBuilder: FormBuilder
    ) {
      // 构造函数内完成赋值
      this.form = this.formBuilder.group({
        name: '',
        email: '',
        password: ''
      });
    }
  
    ngOnInit(): void {}
  }
  

• 方式3：将属性声明为可选类型
  给属性类型加?标记为可选，相当于允许该属性值为undefined，后续使用该属性时需要用可选链?.做空值判断：

  export class RegisterComponent implements OnInit {
    // 标记为可选属性
    form?: FormGroup; 
  
    constructor(
      private formBuilder: FormBuilder
    ) {}
  
    ngOnInit(): void {
      this.form = this.formBuilder.group({
        name: '',
        email: '',
        password: ''
      });
    }
  
    // 后续使用示例
    handleSubmit() {
      console.log(this.form?.value);
    }
  }
  

• 方式4：关闭严格属性初始化校验（不推荐）
  如果项目不需要该校验规则，可以在tsconfig.json中关闭全局配置：

  {
    "compilerOptions": {
      "strictPropertyInitialization": false
    }
  }
  

  也可以单独针对该行代码关闭校验，在属性声明行上方加// @ts-ignore，但会丢失对应类型检查能力，不建议常规场景使用。

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