Vue+TypeScript使用@Prop装饰器遇编译错误与警告的解决咨询

我之前也碰到过这个完全一样的困扰，给你两个不用关闭strictPropertyInitialization的靠谱解决方案：

方案一：使用TypeScript非空断言操作符（最推荐） #

直接在类型声明后面加上!，告诉TypeScript这个属性会在实例创建后被Vue正确初始化，不用我们手动赋值：

@Prop({ default: '' }) private type!: string;

为什么有效？ #

TS的strictPropertyInitialization检查只是静态层面的，它不知道Vue会在组件实例化过程中自动注入Prop的值（包括使用你设置的默认值）。这个!就是给TS一个明确的提示：“放心，这个属性肯定会有值，不用你操心初始化的事”。同时我们没有在代码里直接给type赋值，完全符合Vue的单向数据流规则，不会触发警告。

方案二：定义为可选属性（适合Prop可选的场景） #

如果你的typeProp本身就是可选的（允许父组件不传值），可以把它声明为可选属性：

@Prop({ default: '' }) private type?: string;

注意事项 #

这个方案会让TS认为type可能是undefined，但因为你设置了default: ''，实际运行时type永远不会是undefined。如果你的业务逻辑里需要type始终是字符串类型，还是方案一更合适。

为什么之前的写法会出问题？ #

• 第一种写法（不加初始化）：TS的严格初始化检查认为你没有给type赋值，所以报错；
• 第二种写法（手动赋值= ''）：相当于在组件内部直接修改了Prop的值，违反了Vue的单向数据流原则，所以控制台会弹出警告。

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