Angular中@Input装饰器报错：属性name无初始值也未在构造函数明确赋值

报错原因 #

该错误由TypeScript 2.7版本后默认开启的严格类属性初始化检查规则触发：规则要求类声明的属性必须在声明时赋值、或是在构造函数内完成赋值。TypeScript的静态检查无法感知Angular的@Input父组件传值逻辑，所以即便你实际运行时会从父组件传入name属性，编译阶段仍然会触发该报错。

可用解决方案 #

你可以根据业务场景选择以下任意一种方式处理：

• 方案1：设置属性为可选类型
  适合该@Input属性属于非必传的场景，明确标注属性可能为undefined：

  @Input() name?: string;
  

• 方案2：添加明确赋值断言
  适合你确定父组件一定会传入该属性、不会出现undefined的场景，用!告诉TypeScript无需做初始化检查：

  @Input() name!: string;
  

• 方案3：设置默认初始值
  最稳妥的处理方式，就算父组件未传值也有兜底值，避免后续调用时报空指针错误：

  @Input() name: string = '默认名称';
  

• 方案4（不推荐）：全局关闭严格初始化检查
  修改项目根目录的tsconfig.json配置，关闭该规则即可，缺点是会降低整个项目的类型安全性：

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

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