Vue类组件Prop无初始化器触发TSLint警告的解决咨询

这个问题其实是TypeScript的严格属性初始化检查导致的，你的Vue代码本身没有错误——Vue会在组件实例化时自动注入Prop的值（包括你设置的默认值），但TypeScript不知道这一点，所以会提示你属性没有初始化或者在构造函数里赋值。

最推荐的解决方案：使用TypeScript非空断言 #

在Prop属性后面加上!，告诉TypeScript这个属性一定会被初始化（Vue会帮我们做这件事），这样既不会触发Vue的“修改Prop”警告，也能消除TS的提示：

export default class Browser extends Vue {
  @Prop({ default: '', required: false }) 
  tag!: string; // 添加!断言告知TS属性会被Vue初始化

  created() {
    console.log("the tag prop is " + this.tag);
  }
}

这个!是TypeScript的非空断言运算符，不会影响运行时的代码，只是给编译器一个“这个属性肯定有值”的提示。

备选方案：禁用全局严格属性初始化检查 #

如果你不想逐个处理这类Prop的警告，可以修改项目根目录下的tsconfig.json，把strictPropertyInitialization设为false：

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

不过这个方案不推荐，因为它会关掉所有类属性的初始化检查，可能会漏掉其他真正未初始化的属性带来的潜在问题。

为什么不能直接给Prop赋值？ #

你尝试给Prop赋值时触发的Vue警告是合理的：Vue的Prop遵循单向数据流原则，子组件不能直接修改Prop的值——父组件重新渲染时，Prop的值会被覆盖，同时直接修改Prop也会导致数据流向混乱，难以调试。

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