Vue SFCで型ジェネリクスを使う

基本の使い方

VueのSFCで props や emit を定義する際、次のように型ジェネリクスを用いることができます：

<script setup lang="ts" generics="T">
import { defineProps } from "vue";

interface Props {
  val: T;
}

const { val } = defineProps<Props>();
</script>

型制約をつける

従来のTSと同じく、extends キーワードで型に制約をつけることもできます。

<script setup lang="ts" generics="T extends string | number">
import { defineProps } from "vue";

interface Props {
  val: T;
}

const { val } = defineProps<Props>();
</script>

ユースケース

この例では、planets に渡した配列を型推論して、その値から planet の型を要素のユニオンとして生成します。

<template>
  <ChildComponent :planets='["mercury", "venus", "earth", "mars", "jupyter"]' planet="mercury">
</template>

<script setup lang="ts" generics="T">
import { defineProps } from "vue";

interface Props {
  planets: T[];
  planet: T;   // "mercury" | "venus" | "earth" | "mars" | "jupyter"
}

const { planets, planet } = defineProps<Props>();
</script>

参考

<script setup> | Vue.js

Vue.jsでジェネリックコンポーネントを使う