ComposableとRefの型付け
Ref 、ComputedRef 、Composableの型付き戻り値、MaybeRef
「ComposableとRefの型付け」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
Composition API に型を付ける
Composable は単なる関数であり、ref は型付きのコンテナです。明示的に型を追加すると、Composable を安全に利用でき、呼び出し側で完全な自動補完を利用できます。
ref の型推論
ほとんどの場合、TypeScript は初期値から ref の型を推論します。ref(0) は自動的に Ref<number> になります。
import { ref } from 'vue'
const count = ref(0) // Ref<number>
const name = ref('Coddy') // Ref<string>ref に明示的なジェネリックを指定する
初期値だけでは完全な型を表現できない場合、明示的なジェネリックを渡します。たとえば、最初は null ですが、後からオブジェクトになる値などです。
interface User { id: number; name: string }
const user = ref<User | null>(null)Ref 型
Ref<T> は、.value が型 T である書き換え可能な ref を表します。ref を受け取る変数や関数のパラメーターに型を付けるときに使用します。
import type { Ref } from 'vue'
function useDouble(n: Ref<number>) {
return computed(() => n.value * 2)
}ComputedRef 型
computed は読み取り専用の ComputedRef<T> を返します。計算値を返す Composable に型を付けるときに使用します。
import type { ComputedRef } from 'vue'
const doubled: ComputedRef<number> = computed(() => count.value * 2)Composable の戻り値に型を付ける
戻り値の形を明示すると、利用側で取得できる内容を正確に把握できます。明示的な戻り値の型は、Composable のドキュメントとしても機能します。
import { ref, type Ref } from 'vue'
function useCounter(): { count: Ref<number>; increment: () => void } {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}型推論に任せる
多くの場合、明示的な戻り値の型を省略して TypeScript に推論させることができます。安定した公開インターフェースを定めたい場合にだけ、明示的な型を追加してください。
柔軟な入力のための MaybeRef
MaybeRef<T> は、通常の T または Ref<T> のどちらかになり得る値を表します。これにより、Composable はどちらの形式も受け付けられます。
import type { MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
// name could be 'Coddy' or ref('Coddy')
}unref で値を取り出す
unref(x) は、x が ref なら x.value を返し、それ以外なら x 自体を返します。MaybeRef と組み合わせると、入力を同じ形式に正規化できます。
import { unref, type MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
const text = unref(name) // always a string
return 'Hello ' + text
}toValue: 最新のヘルパー
Vue 3.3 で追加された toValue は、ref のラップを解除するだけでなく、getter 関数も呼び出します。MaybeRefOrGetter 型の入力を正規化する場合に推奨される方法です。
import { toValue, type MaybeRefOrGetter } from 'vue'
function useLen(input: MaybeRefOrGetter<string>) {
return computed(() => toValue(input).length)
}リアクティブオブジェクトに型を付ける
reactive はオブジェクトの型を直接推論するため、.value は必要ありません。明示的に型を付ける場合は、オブジェクトの interface を使って変数に注釈を付けます。
import { reactive } from 'vue'
interface State { count: number; name: string }
const state: State = reactive({ count: 0, name: '' })確認問題
Composable と ref の型付けに関する知識を確認しましょう。
まとめ
Composition API に型を付ける方法を学びました。
- ref は型を推論します。初期値だけでは不十分な場合は ref<T>() を使用します。
- Ref<T> と ComputedRef<T> で ref と computed に型を付けます。
- Composable の戻り値に型を付けて、明確なインターフェースを定めます。
- MaybeRef<T> と unref()/toValue() により、柔軟な入力を受け付けられます。
よくある質問
「ComposableとRefの型付け」レッスンは無料ですか？
はい。「ComposableとRefの型付け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「ComposableとRefの型付け」で何を学びますか？
Ref 、ComputedRef 、Composableの型付き戻り値、MaybeRef ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ComposableとRefの型付け」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。