Angular中TypeScript报ts(2564)属性未初始化错误的解决方法

基于Angular Material开发Angular项目时，参考Udemy教程编写SignupComponent组件，编译阶段在类属性声明行抛出ts(2564)类型错误，初步怀疑和TypeScript版本更新有关。
涉及的组件代码：

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  maxDate: Date;

  constructor() { }

  ngOnInit(): void {
    maxDate = new Date();
    this.maxDate.setDate(this.maxDate.getFullYear() - 18);
  }

  onSubmit(form:NgForm) {
    console.log(form);
  }

}

抛出的错误信息：

Property 'maxDate' has no initializer and is not definitely assigned in the constructor.ts(2564)

该错误是TypeScript 2.7版本新增的strictPropertyInitialization（严格属性初始化）校验规则触发的。Angular新建项目默认开启strict: true配置，会自动启用该规则：TS静态检查阶段会要求所有类实例属性必须满足以下任一条件，否则就会抛出ts(2564错误：

• 属性声明时直接给定初始值
• 属性在类的constructor构造函数中被明确赋值
  TS的静态检查不会追踪构造函数之外的方法（包括Angular的ngOnInit这类生命周期钩子）内的赋值逻辑，所以即使逻辑上在ngOnInit中给maxDate赋值，检查阶段依然会判定该属性没有完成初始化。
  代码中还存在两处运行时/逻辑问题：

1. ngOnInit方法内第一行赋值语句漏写this关键字，运行时会触发“maxDate未定义”错误
2. 日期计算逻辑有误：setDate方法用于设置月内的日期序号，计算18年前的日期应该调用setFullYear方法

• 方案1：使用明确赋值断言（推荐，不丢失严格校验能力）
  在属性声明后添加!非空断言，手动告知TS该属性会在使用前完成赋值，不需要做初始化检查，是Angular开发中适配生命周期赋值场景最常用的写法：

  export class SignupComponent implements OnInit {
    // 添加!做明确赋值断言
    maxDate!: Date;
  
    constructor() { }
  
    ngOnInit(): void {
      // 补全this关键字，修正日期计算逻辑
      this.maxDate = new Date();
      this.maxDate.setFullYear(this.maxDate.getFullYear() - 18);
    }
  
    onSubmit(form:NgForm) {
      console.log(form);
    }
  }
  

• 方案2：声明时直接初始化
  对于逻辑固定的属性，可以直接在声明时完成初始化，不需要放到ngOnInit中：

  export class SignupComponent implements OnInit {
    maxDate: Date = new Date();
  
    constructor() {
      this.maxDate.setFullYear(this.maxDate.getFullYear() - 18);
    }
  
    ngOnInit(): void {}
  
    onSubmit(form:NgForm) {
      console.log(form);
    }
  }
  

• 方案3：标记属性为可选（不推荐，使用时需重复判空）
  给属性加?标记为可选属性，TS会自动将其类型推导为Date | undefined，后续每次访问该属性都需要做非空校验，代码冗余度高：

  maxDate?: Date;
  

• 方案4：关闭严格属性初始化校验（非常不推荐）
  在项目根目录的tsconfig.json中添加配置关闭该校验，会丢失所有类属性的初始化检查能力，容易漏掉真实的未赋值bug：

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

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