ジェネリックVueコンポーネント
ジェネリックを使ったdefineComponent、ジェネリックなscript setup、型付きスロットprops
「ジェネリックVueコンポーネント」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ジェネリックコンポーネント
型付きリスト、セレクト、テーブルなど、さまざまなデータ型で動作するコンポーネントがあります。Vue 3.3 では generic components を作成できるため、利用側で完全な型推論を維持でき、any に頼らずに済みます。
generic 属性
<script setup> に generic 属性を追加します。これにより、ジェネリック関数と同じように、スクリプト全体で利用できる型パラメーターを宣言できます。
<script setup lang="ts" generic="T">
// T can now be used below
</script>ジェネリック Props
defineProps で型パラメーターを使用します。この例では、コンポーネントが任意の型 T の配列を受け付けます。
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>呼び出し側での型推論
親コンポーネントが items を渡すと、TypeScript はデータから T を推論するため、明示的な型は必要ありません。数値を渡した場合、selected も数値でなければなりません。
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->型を制約する
extends を追加して、特定の形を必須にします。この例では T に id が必要となるため、キー付きリストに便利です。
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>複数の型パラメーター
ジェネリック関数のシグネチャと同じように、複数のパラメーターをカンマで区切って宣言します。
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>型付き Slot Props
ジェネリックと型付きスロットを組み合わせると、スロットのコンテンツにも型を付けられます。defineSlots でスロットのシグネチャを宣言してください。
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>ジェネリックなスロットを描画する
テンプレートで各アイテムをスロットに渡します。親コンポーネントは、正しく型付けされたスロット props を受け取ります。
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>推論を利用してコンポーネントを使う
親コンポーネントは、渡した配列に基づいて、スロットのスコープ内で型付きの item を自動的に取得します。
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>ジェネリック Emits
型パラメーターは defineEmits にも引き継がれるため、イベントのペイロードにジェネリック型を含めることができます。
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>ジェネリックを使う場面
コンポーネントが本当に特定の型に依存せず、その中を通して型推論を引き継ぎたい場合にジェネリックコンポーネントを使います。リスト、テーブル、オートコンプリートなどが該当します。データの形が固定されている場合は、通常の型付きコンポーネントのほうがシンプルです。
確認問題
ジェネリックコンポーネントに関する知識を確認しましょう。
まとめ
ジェネリックコンポーネントについて学びました。
- script setup の generic 属性で型パラメーターを宣言します。
- defineProps で使用し、items: T[] のような型に依存しないデータを扱います。
- extends で制約を追加し、複数のパラメーターも指定できます。
- defineSlots でスロット props に型を付けると、利用側で完全な型推論を利用できます。
よくある質問
「ジェネリックVueコンポーネント」レッスンは無料ですか？
はい。「ジェネリックVueコンポーネント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「ジェネリックVueコンポーネント」で何を学びますか？
ジェネリックを使ったdefineComponent、ジェネリックなscript setup、型付きスロットprops ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ジェネリックVueコンポーネント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。