Vue Academy · レッスン

defineProps/defineEmitsによる型付きPropsとEmits

Q: 「defineProps/defineEmitsによる型付きPropsとEmits」で何を学びますか？

ジェネリックなdefineProps ()、複雑な型、省略可能なprops、emitの型付け ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ジェネリックなdefineProps ()、複雑な型、省略可能なprops、emitの型付け

レッスン 2/413 ステップ

「defineProps/defineEmitsによる型付きPropsとEmits」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

コンポーネントの入力と出力に型を付ける

lang="ts" を指定すると、defineProps と defineEmits のマクロで TypeScript の型を直接受け取れるようになります。これにより、コンポーネントに入るデータと出るデータをコンパイル時にチェックできます。

インターフェースから Props を定義する

defineProps のジェネリックに型を渡します。interface を使うと、複雑な props の形を読みやすく再利用可能な形で定義できます。

<script setup lang="ts">
interface Props {
  title: string
  count: number
}
const props = defineProps<Props>()
</script>

インライン型リテラル

小さなコンポーネントであれば、インラインのオブジェクト型で問題ありません。別途 interface を用意する必要はありません。

<script setup lang="ts">
const props = defineProps<{
  label: string
  disabled: boolean
}>()
</script>

? で省略可能なプロパティを定義する

? を付けると、プロパティを省略可能にできます。省略可能な props は T | undefined として型付けされ、親コンポーネントでは省略できます。

<script setup lang="ts">
interface Props {
  title: string
  subtitle?: string
}
const props = defineProps<Props>()
</script>

複雑な Props の型

Props には配列、ユニオン型、オブジェクトの形など、TypeScript で表現できるあらゆる型を指定できます。

<script setup lang="ts">
interface Props {
  items: string[]
  size: 'sm' | 'md' | 'lg'
  user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>

withDefaults でデフォルト値を設定する

型だけを指定する形式ではデフォルト値を保持できないため、withDefaults でラップします。第 2 引数で prop 名とデフォルト値の対応を指定します。

<script setup lang="ts">
const props = withDefaults(defineProps<{
  size?: string
  count?: number
}>(), {
  size: 'md',
  count: 0
})
</script>

オブジェクトと配列のデフォルト値

オブジェクトと配列のデフォルト値は、Options API の場合と同様にファクトリー関数から返す必要があります。これにより、複数のコンポーネントで 1 つのインスタンスが共有されるのを防げます。

withDefaults(defineProps<{
  tags?: string[]
}>(), {
  tags: () => []
})

型付き Emits を定義する

defineEmits には、各イベントとそのペイロードを call signature として列挙した型を渡せます。これにより、間違ったペイロードの型をコンパイル時に検出できます。

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', value: string): void
  (e: 'delete', id: number): void
}>()
</script>

型付きペイロードを発行する

これで emit は有効なイベント名と、それに対応するペイロードの型だけを受け付けます。文字列が必要な場所に数値を渡すと、コンパイルエラーになります。

function rename(name: string) {
  emit('change', name) // ok
  // emit('change', 123) // type error
}

名前付きタプル構文

Vue 3.3 以降では、各イベントを引数の型の tuple に対応付ける簡略化されたオブジェクト形式を使用できます。call signature よりも簡潔です。

<script setup lang="ts">
const emit = defineEmits<{
  change: [value: string]
  delete: [id: number]
}>()
</script>

Props と Emits を組み合わせる

型付きコンポーネントでは通常、入力を defineProps、出力を defineEmits で定義し、最初から最後まで完全にチェックします。

<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()
</script>

確認問題

型付き props と emits に関する知識を確認しましょう。

対話的なレッスンで答える

まとめ

コンポーネントの入出力に型を付ける方法を学びました。

interface またはインライン型を defineProps<T>() に渡します。
省略可能な props には ? を、デフォルト値には withDefaults を使います（オブジェクトと配列にはファクトリーを使います）。
defineEmits<T>() でイベント名とペイロードに型を付けます。
タプル形式（event: [payload]）は現代的な簡略構文です。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「defineProps/defineEmitsによる型付きPropsとEmits」レッスンは無料ですか？

はい。「defineProps/defineEmitsによる型付きPropsとEmits」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「defineProps/defineEmitsによる型付きPropsとEmits」で何を学びますか？

ジェネリックなdefineProps ()、複雑な型、省略可能なprops、emitの型付けブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「defineProps/defineEmitsによる型付きPropsとEmits」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

VueプロジェクトでのTypeScript設定
defineProps/defineEmitsによる型付きPropsとEmits
ComposableとRefの型付け
ジェネリックVueコンポーネント

← Vue Academyに戻る