Angular属性装饰器在新版VSCode中抛出"Property 'x' has no initializer..."错误

刚更新VS Code后遇到这个红色下划线报错？我太懂了——这其实是TypeScript严格属性初始化检查在起作用，VS Code更新后可能默认强化了TS的严格模式，或者你的项目tsconfig.json里的相关配置被触发了。下面给你几个实用的解决方案，按需选就行：

• 给属性设置初始值
  最简单直接的方式，给每个@Input属性加个合理的默认值，让TypeScript知道这个属性不会是undefined：

  @Input() hero: Hero = {} as Hero; // 用类型断言处理对象类型
  @Input('master') masterName: string = ''; // 字符串类型直接设为空串
  

  这种方式最安全，哪怕父组件没传输入值，组件运行时也不会因为属性未定义出问题。

• 使用非空断言操作符!
  如果你确定父组件在使用这个组件时一定会传递输入属性，那可以用!告诉TypeScript：“放心，这个属性肯定会被赋值，不用检查初始化”：

  @Input() hero!: Hero;
  @Input('master') masterName!: string;
  

  注意：要是父组件真的没传值，运行时可能会抛出错误，所以只在你能保证输入必传的场景用这个。

• 修改tsconfig.json放宽检查
  如果你不想逐个修改组件属性，可以全局关闭严格属性初始化检查。找到项目根目录的tsconfig.json，修改strictPropertyInitialization为false：

  {
    "compilerOptions": {
      // 其他配置项...
      "strictPropertyInitialization": false
    }
  }
  

  不过我不太推荐这种方式——TS的严格模式能帮你提前揪出很多潜在的bug，关掉它等于放弃了一层安全保障。

• 构造函数初始化（不推荐用于@Input）
  虽然可以在构造函数里给属性赋值，但对于@Input属性来说意义不大：

  constructor() {
    this.masterName = '';
  }
  

  因为父组件传递的输入值会覆盖构造函数里的初始值，而且操作起来不如直接给属性加初始值方便，所以一般不用这个方法处理@Input的问题。

总结一下，优先选前两种方案，根据你的业务场景来：能设合理初始值就用第一种，确定输入必传就用非空断言，尽量保留TS的严格检查哦。

内容的提问来源于stack exchange，提问作者Kyle V.