Angular从v9升级到v10后属性初始化前被使用报错如何解决

报错根因 #

Angular v10 起默认启用了 TypeScript 严格属性初始化校验规则 strictPropertyInitialization，该规则要求类属性必须在声明时赋值或构造函数内完成初始化，否则就会触发该报错。
你虽然提前声明了searchParameters属性，但仅定义了类型未赋予初始值，且在声明modelMainFilters时直接访问了还未完成初始化的this.searchParameters，因此触发了校验拦截。

修复方案 #

方案1：给属性添加初始值（最推荐，符合严格校验要求） #

由于你定义的PartnerSearchParameters接口所有属性都是可选的，直接给searchParameters初始化一个空对象即可：

// 声明时直接初始化
searchParameters: PartnerSearchParameters = {};

赋值后再访问this.searchParameters就不会触发未初始化报错。

方案2：延后modelMainFilters的初始化时机 #

不要在类属性声明阶段直接初始化modelMainFilters，而是放到constructor或者ngOnInit中，等searchParameters完成赋值后再初始化：

export class PartnerSearchListComponent implements OnInit, AfterViewInit {
  searchParameters: PartnerSearchParameters;
  // 先声明类型，暂不赋值
  modelMainFilters: Record<keyof PartnerSearchParameters, string | undefined>;

  ngOnInit(): void {
    // 先完成searchParameters的赋值逻辑，再初始化modelMainFilters
    this.searchParameters = /* 你原有的赋值逻辑 */;
    this.modelMainFilters = {
      address: this.searchParameters?.address,
      code: this.searchParameters?.code,
      name: this.searchParameters?.name,
      taxRegNumber: this.searchParameters?.taxRegNumber,
    };
  }
}

注意：你原代码中name: this.searchParameters?.name 行末尾缺少逗号，需要补全否则会触发语法错误。

方案3：使用非空断言绕过校验 #

如果你能100%确认searchParameters一定会在使用前被赋值，可以用非空断言符!告诉TypeScript跳过该属性的初始化校验：

searchParameters!: PartnerSearchParameters;

该方案改造成本最低，但如果后续逻辑变更导致属性未提前赋值，会有运行时报错风险。

方案4：关闭全局严格初始化校验（不推荐） #

如果不需要该校验规则，可以修改项目根目录的tsconfig.json，添加配置关闭校验：

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

该方案会失去相关类型校验保护，不建议开启。

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