Vue3 ジェネリクスコンポーネント完全ガイド｜generic属性で型安全なUI部品を作る方法

<!-- GenericなしのListコンポーネント -->
<script setup lang="ts">
const props = defineProps<{
  items: unknown[]
}>()

const emit = defineEmits<{
  select: [item: unknown]
}>()
</script>

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

<script setup lang="ts">
import MyList from './MyList.vue'

interface Product {
  id: number
  name: string
  price: number
}

const products: Product[] = [
  { id: 1, name: 'キーボード', price: 12000 },
  { id: 2, name: 'マウス', price: 5000 },
]
</script>

<template>
  <!-- T は Product に推論される -->
  <MyList :items="products" :selected="products[0]" />
</template>

<script setup lang="ts" generic="T extends { id: number; label: string }">
defineProps<{
  options: T[]
  modelValue: T
}>()
</script>

<script setup lang="ts" generic="T extends string | number">
defineProps<{
  value: T
  options: T[]
}>()
</script>

<script setup lang="ts" generic="T extends Item">
import type { Item } from './types'

defineProps<{
  data: T[]
}>()
</script>

<script setup lang="ts" generic="T extends { id: number }">
const props = defineProps<{
  items: T[]
}>()

const emit = defineEmits<{
  select: [item: T]
  remove: [id: T['id']]
}>()

function handleSelect(item: T) {
  emit('select', item)
}

function handleRemove(item: T) {
  emit('remove', item.id)
}
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span @click="handleSelect(item)">{{ item.id }}</span>
      <button @click="handleRemove(item)">削除</button>
    </li>
  </ul>
</template>

<script setup lang="ts">
import ItemList from './ItemList.vue'

interface User {
  id: number
  name: string
  email: string
}

const users: User[] = [/* ... */]

// item の型は User と推論される
function onSelect(item: User) {
  console.log(item.name)
}
</script>

<template>
  <ItemList :items="users" @select="onSelect" />
</template>

<script setup lang="ts" generic="TKey extends string, TValue">
defineProps<{
  entries: { key: TKey; value: TValue }[]
  selectedKey: TKey
}>()

defineEmits<{
  change: [key: TKey, value: TValue]
}>()
</script>

<script setup lang="ts" generic="T extends 'red' | 'blue' | 'green'">
defineProps<{
  color: T
  shade: `${T}-light` | `${T}-dark`
}>()
</script>

<!-- GenericSelect.vue -->
<script setup lang="ts" generic="T extends { id: string | number; label: string }">
const props = defineProps<{
  options: T[]
  modelValue: T | null
  placeholder?: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: T]
}>()

function handleChange(event: Event) {
  const target = event.target as HTMLSelectElement
  const selected = props.options.find(
    (opt) => String(opt.id) === target.value
  )
  if (selected) {
    emit('update:modelValue', selected)
  }
}
</script>

<template>
  <select
    :value="modelValue?.id ?? ''"
    @change="handleChange"
  >
    <option v-if="placeholder" value="" disabled>
      {{ placeholder }}
    </option>
    <option
      v-for="opt in options"
      :key="opt.id"
      :value="opt.id"
    >
      {{ opt.label }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import GenericSelect from './GenericSelect.vue'

interface Prefecture {
  id: number
  label: string
  region: string
}

const prefectures: Prefecture[] = [
  { id: 1, label: '北海道', region: '北海道' },
  { id: 13, label: '東京都', region: '関東' },
  { id: 27, label: '大阪府', region: '近畿' },
]

const selected = ref<Prefecture | null>(null)
</script>

<template>
  <GenericSelect
    v-model="selected"
    :options="prefectures"
    placeholder="都道府県を選択"
  />
  <!-- selected.region に安全にアクセスできる -->
  <p v-if="selected">地方: {{ selected.region }}</p>
</template>

<!-- GenericTable.vue -->
<script setup lang="ts" generic="T extends Record<string, unknown>">
import { computed } from 'vue'

const props = defineProps<{
  rows: T[]
  columns: { key: keyof T; header: string }[]
}>()

const selectedIds = defineModel<Set<number>>('selectedIds', {
  default: () => new Set<number>(),
})

const emit = defineEmits<{
  rowClick: [row: T]
}>()

const allSelected = computed(() =>
  props.rows.length > 0 &&
  props.rows.every((_, i) => selectedIds.value.has(i))
)

function toggleAll() {
  if (allSelected.value) {
    selectedIds.value = new Set()
  } else {
    selectedIds.value = new Set(props.rows.map((_, i) => i))
  }
}

function toggleRow(index: number) {
  const next = new Set(selectedIds.value)
  if (next.has(index)) {
    next.delete(index)
  } else {
    next.add(index)
  }
  selectedIds.value = next
}
</script>

<template>
  <table>
    <thead>
      <tr>
        <th>
          <input
            type="checkbox"
            :checked="allSelected"
            @change="toggleAll"
          />
        </th>
        <th v-for="col in columns" :key="String(col.key)">
          {{ col.header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(row, index) in rows"
        :key="index"
        @click="emit('rowClick', row)"
      >
        <td>
          <input
            type="checkbox"
            :checked="selectedIds.has(index)"
            @change.stop="toggleRow(index)"
          />
        </td>
        <td v-for="col in columns" :key="String(col.key)">
          {{ row[col.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts" generic="T extends 'view' | 'edit'">
type ModeProps = T extends 'edit'
  ? { mode: T; onSave: () => void }
  : { mode: T; onSave?: never }

defineProps<ModeProps>()
</script>

<template>
  <div>
    <slot />
    <button v-if="mode === 'edit'" @click="onSave">保存</button>
  </div>
</template>

import type { ComponentExposed } from 'vue-component-type-helpers'
import GenericSelect from './GenericSelect.vue'

type SelectInstance = ComponentExposed<typeof GenericSelect>

<template>
  <!-- @vue-generic {Product} -->
  <GenericSelect :options="computedOptions" />
</template>

<script setup lang="ts" generic="T extends { id: number }">
defineProps<{
  items: T[]
}>()

defineSlots<{
  default: (props: { item: T; index: number }) => void
}>()
</script>

<template>
  <div v-for="(item, index) in items" :key="item.id">
    <slot :item="item" :index="index" />
  </div>
</template>

<template>
  <GenericList :items="users">
    <template #default="{ item }">
      <!-- item は User 型として補完される -->
      <span>{{ item.name }} ({{ item.email }})</span>
    </template>
  </GenericList>
</template>