Angular报错Property 'appareilStatus'无初始化且未在构造函数中赋值求助

报错原因 #

这个错误由TypeScript的strictPropertyInitialization（严格属性初始化）校验规则触发，Angular 12及之后的版本默认开启了严格模式，该规则要求类中声明的所有属性，要么在声明的同时完成赋值，要么在构造函数内部完成赋值，否则就会抛出该错误。

参考截图 #

• 组件代码截图
  
• 控制台报错截图
  

解决方案 #

你可以根据实际业务场景选择以下任意一种方案解决：

• 声明属性时直接赋予初始值（最推荐）
  直接在声明appareilStatus的同时给它一个符合类型的默认值即可，示例：

// 可根据业务需要替换为对应的默认值
appareilStatus: string = 'off';

• 在构造函数中完成赋值
  如果你需要在构造阶段计算属性值，可以在构造函数内给该属性赋值：

export class YourComponent {
  appareilStatus: string;

  constructor() {
    // 这里可以写赋值逻辑，也可以直接赋固定值
    this.appareilStatus = Math.random() > 0.5 ? 'on' : 'off';
  }
}

• 添加非空断言标记
  如果你确定该属性会在后续生命周期（比如ngOnInit）中完成赋值，不会出现空值情况，可以在属性名后加!标记，告诉TypeScript无需对该属性做初始化校验：

appareilStatus!: string;

• 全局关闭严格属性初始化校验（不推荐）
  如果不需要该校验规则，可以修改项目根目录下的tsconfig.json文件，在compilerOptions节点下添加配置：

{
  "compilerOptions": {
    // 其他配置保持不变
    "strictPropertyInitialization": false
  }
}

注意：该操作会全局关闭所有属性的初始化校验，可能会增加后续出现空值异常的风险，不建议初学者使用。

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