Vue でジェネリックコンポーネントの Props 型を取得したい

筆者は、子コンポーネントの Props の型を取りたいときによく InstanceType<...> を利用しています。

https://zenn.dev/ytr0903/articles/905306671f39c8#子コンポーネントの-props-の型を取りたい

App.vue

<script lang="ts" setup>
import ChildComponent from '@/components/ChildComponent.vue'

const childProps: InstanceType<typeof ChildComponent>['$props'] = {}
</script>

しかし、ジェネリックコンポーネントに対しては InstanceType<typeof GenericComponent>['$props'] のような取り方はできません。

App.vue

<script setup lang="ts">
import GenericComponent from '@/components/GenericComponent.vue`

const genericProps: InstanceType<typeof GenericComponent>['$props'] = {}
</script>

InstanceType は動作しないので、vue-component-type-helpers ライブラリーの ComponentExposed を使って参照する必要があります。（引用元）

これは、vue-component-type-helpers の ComponentExposed<...> を利用することで解決できます。

components/GenericComponent.vue

<script setup lang="ts" generic="T extends 'todo' | 'progress' | 'inReview' | 'done'">
const props = defineProps<{
  status: T
  progressCount?: T extends 'progress' ? number : never
}>()

// 外部にプロパティを公開する
defineExpose(props)
</script>

また、 ComponentExposed は、 defineExpose を使用して props を明示的に公開することで取得できるようになります。ジェネリックコンポーネント側で props を defineExpose でラップするのを忘れずに行いましょう。

App.vue

<script setup lang="ts">
import type { ComponentExposed } from 'vue-component-type-helpers'
import GenericComponent from '@/components/GenericComponent.vue`

const genericProps: ComponentExposed<typeof GenericComponent>['$props'] = {}
</script>

これでジェネリックコンポーネントに対しても期待通りに Props の型を取得できます。