Vue 2.x中@Component装饰器定义组件的通用TypeScript类型选择问题

错误原因 #

你当前将passedComponent的类型声明为Vue，而Vue类型指代的是组件实例的类型，你父组件传入的DummyComponent是组件构造函数（组件类本身），并不是实例对象，二者类型不匹配才触发了属性缺失的报错。

解决方案 #

针对Vue2 + vue-property-decorator的开发场景，有两种通用类型可以兼容所有@Component装饰器定义的组件类：

• 直接使用typeof Vue作为类型，所有@Component装饰生成的组件类都是Vue的子类，天然兼容该类型
• 使用Vue官方提供的VueConstructor<Vue>类型，这是专门用于标注Vue组件构造函数的标准类型，语义更清晰

修改后的代码示例 #

只需修改子组件的prop类型定义即可：

// 第一种写法：直接用typeof Vue
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
 name: 'SomeComponent'
})
export default class SomeComponent extends Vue {
  @Prop() readonly someProp!: { passedComponent: typeof Vue }
}

// 第二种写法：用VueConstructor，语义更规范
import { Component, Vue, Prop } from 'vue-property-decorator'
import type { VueConstructor } from 'vue'

@Component({
 name: 'SomeComponent'
})
export default class SomeComponent extends Vue {
  @Prop() readonly someProp!: { passedComponent: VueConstructor<Vue> }
}

修改后传入任意@Component装饰的组件都不会触发类型报错，且完全符合动态组件:is属性接收组件构造函数的使用规则。

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