Angular使用@Input定义指定结构的element属性报错无初始化器怎么办？

这个报错是TypeScript 2.7及以上版本默认开启严格类属性初始化检查导致的：TS要求所有类属性必须在声明时赋值，或者在构造函数中完成初始化。而Angular的@Input属性是在组件实例化完成后才会由父组件传值，TS无法检测到该赋值逻辑，因此抛出编译错误。

• 方案1：添加非空断言操作符（最常用） #

  如果你确定父组件一定会传入该@Input值，可以在属性名后加!，告诉TS该属性一定会被赋值，跳过初始化检查：

  @Input('srvElement') element!: {type: string, name: string, content: string};
  

• 方案2：设置默认初始值 #

  给属性指定初始默认值，满足TS初始化要求，同时可以兼容父组件未传值的场景：

  @Input('srvElement') element: {type: string, name: string, content: string} = {
    type: '',
    name: '',
    content: ''
  };
  

• 方案3：将属性标记为可选 #

  在属性名后加?将其定义为可选属性，后续使用该属性时需要搭配可选链?.避免运行时报错：

  // 声明
  @Input('srvElement') element?: {type: string, name: string, content: string};
  
  // 使用示例
  const elementName = element?.name;
  

• 方案4：全局关闭严格属性初始化检查（不推荐） #

  如果项目不需要该校验规则，可以修改项目根目录的tsconfig.json，关闭对应检查项：

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

  该修改会全局关闭所有类属性的初始化检查，可能会隐藏其他潜在的未初始化问题，不建议随意开启。

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