Vue组合式API中如何获取组件属性类型及构造ComponentProps？

Vue 3 场景 #

Vue 3 原生支持TypeScript，可直接借助官方内置类型工具提取组件Props类型：

情况1：使用<script setup lang="ts">编写组件

若组件采用<script setup>语法：

<!-- MyComponent.vue -->
<script setup lang="ts">
const props = defineProps<{
  title: string
  count?: number
}>()
</script>

直接导入Vue提供的ComponentProps类型，结合组件类型使用即可：

import MyComponent from './MyComponent.vue'
import type { ComponentProps } from 'vue'

const props: ComponentProps<typeof MyComponent> = {
  title: 'Hello Vue 3'
}

情况2：使用选项式API编写组件

若组件是选项式API结构：

<!-- MyComponent.vue -->
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    title: { type: String, required: true },
    count: { type: Number, default: 0 }
  }
})
</script>

通过ExtractPropTypes工具提取Props的具体类型：

import MyComponent from './MyComponent.vue'
import type { ExtractPropTypes } from 'vue'

type ComponentProps = ExtractPropTypes<typeof MyComponent['props']>

const props: ComponentProps = {
  title: 'Hello Options API'
}

Vue 2 场景 #

Vue 2需结合TypeScript类型推导或第三方工具实现：

使用Vue.extend定义组件

// MyComponent.ts
import Vue from 'vue'

const MyComponent = Vue.extend({
  props: {
    title: { type: String, required: true },
    count: { type: Number, default: 0 }
  }
})

通过InstanceType提取组件实例的$props属性类型：

import MyComponent from './MyComponent'

type ComponentProps = InstanceType<typeof MyComponent>['$props']

const props: ComponentProps = {
  title: 'Hello Vue 2'
}

使用@vue/composition-api（组合式API）

若在Vue 2中使用组合式API，可参考Vue 3的思路，通过defineProps的类型推导配合ExtractPropTypes工具获取Props类型。

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