Vue3配合TypeScript使用vue-class-component时定义prop类型有什么好处？

type参数的核心作用 #

• 运行时类型校验（开发环境生效）
  type是Vue原生的运行时校验配置，仅在开发环境会触发校验逻辑，生产环境会被 tree-shaking 移除不影响性能：
  • 传入String/Number/Boolean等基础构造函数时，会校验传入值的基础类型，不匹配则在控制台抛出警告，帮助快速定位传参错误
  • 传入自定义类（比如你写的type: Foo）时，校验逻辑为value instanceof Foo，这就是你遇到Proxy实例报警告的原因：默认Proxy实例的instanceof判断不会指向原类，需要自行配置Proxy的getInstanceof陷阱才能通过校验
• TypeScript类型推导辅助
  对于对象、数组、自定义接口这类复杂类型，TS无法直接从运行时的type配置推断出具体类型，需要用PropType<T>显式标注type的TS类型，才能让TS正确推导prop的类型：
  • 如果你已经手动给字段加了!: Foo的类型标注，这部分的作用会被覆盖，写不写PropType都能获得正确的TS类型提示
  • 如果要配置prop默认值，使用PropType可以避免TS对默认值的类型误判，减少不必要的类型断言

三种写法的选择建议 #

1. 不推荐第一种@Prop({}) readonly foo!: Foo;
   完全没有运行时校验，其他开发者调用你的组件传错类型时，开发环境不会有任何提示，排查问题成本极高
2. 适合用@Prop({type: Foo}) readonly foo!: Foo;的场景
   你明确要求传入的必须是Foo类的实例（而非结构符合Foo的普通对象），且能处理Proxy实例的instanceof判断问题，运行时的instanceof校验能帮你拦截不符合要求的传参
3. 适合用@Prop({type: Object as PropType<Foo>}) readonly foo!: Foo;的场景
   你只要求传入的对象结构符合Foo的类型定义，不需要是Foo的实例，运行时只会校验是不是对象，同时获得完整的TS类型提示，这种写法也是社区对普通对象类型prop的主流写法

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