对 TypeScript 使用 @Prop 装饰器 - 编译器在要求初始化 prop 时出错

Posted 2023-02-23

【中文标题】对 TypeScript 使用 @Prop 装饰器 - 编译器在要求初始化 prop 时出错

【英文标题】：Using @Prop decorator for TypeScript - compilers gives error asking to initialise prop

【发布时间】：2018-10-29 12:37:18

【问题描述】：

我正在使用带有 TypeScript 和 vue-property-decorator 包的 Vue。

当我使用这样的道具时：

@Prop( default: '' ) private type: string

我收到一个 TS 编译器错误：Property 'type' has no initializer and is not definitely assigned in the constructor.

但是如果我用类似的东西初始化它：

@Prop( default: '' ) private type: string = ''

然后我在浏览器控制台中收到警告：

vue.runtime.esm.js?ff9b:587 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten 
whenever the parent component re-renders. Instead, use a data or computed property based on the prop's 
value. Prop being mutated: "type"

那么在这种情况下我应该怎么做才能没有任何错误或警告？

我唯一能想到的就是在 tsconfig.json 中设置："strictPropertyInitialization": false，但如果可能的话，我想避免这样做。

谢谢！

【问题讨论】：

另见***.com/q/50425984/3995261

【参考方案1】：

初始错误消息是 TypeScript 的严格类初始化（在 2.7 中引入）的结果。 2.7 的发行说明描述了使用definite assignment operator (!) 来解决此问题。在你的情况下，你会这样做：

@Prop( default: '' ) private type!: string