0Pricing
Vue Academy · Lekcja

Typowanie composable i refów

Ref , ComputedRef , typowany zwrot z composable oraz MaybeRef .

Typowanie composable i refów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Typowanie Composition API

Composable to po prostu funkcje, a refy to po prostu typowane kontenery. Dodanie jawnych typów sprawia, że composable można bezpiecznie wykorzystywać, a kod korzystający z nich otrzymuje pełne podpowiedzi.

Wnioskowane typy ref

W większości przypadków TypeScript wnioskuje typ ref na podstawie jego wartości początkowej. ref(0) automatycznie staje się Ref<number>.

import { ref } from 'vue'
const count = ref(0)        // Ref<number>
const name = ref('Coddy')  // Ref<string>

Jawne generyki ref

Gdy wartość początkowa nie wyraża pełnego typu — na przykład wartość zaczyna się od null, ale później staje się obiektem — należy przekazać jawny parametr generyczny.

interface User { id: number; name: string }
const user = ref<User | null>(null)

Typ Ref

Ref<T> opisuje zapisywalny ref, którego .value ma typ T. Należy używać go do typowania zmiennych lub parametrów funkcji otrzymujących refy.

import type { Ref } from 'vue'
function useDouble(n: Ref<number>) {
  return computed(() => n.value * 2)
}

Typ ComputedRef

computed zwraca tylko do odczytu ComputedRef<T>. Tego typu należy używać podczas typowania composable zwracającego wartości obliczane.

import type { ComputedRef } from 'vue'
const doubled: ComputedRef<number> = computed(() => count.value * 2)

Typowanie wartości zwracanej przez composable

Należy określić kształt zwracanej wartości, aby kod korzystający z composable dokładnie wiedział, co otrzymuje. Jawny typ zwracany dokumentuje również 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 }
}

Korzystanie z inferencji

Często można pominąć jawny typ zwracany i pozwolić TypeScriptowi na jego wywnioskowanie. Jawny typ warto dodać tylko wtedy, gdy potrzebny jest stabilny publiczny kontrakt.

MaybeRef dla elastycznych danych wejściowych

MaybeRef<T> oznacza wartość, która może być zwykłym T albo Ref<T>. Dzięki temu composable może przyjmować obie formy.

import type { MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
  // name could be 'Coddy' or ref('Coddy')
}

Rozpakowywanie za pomocą unref

unref(x) zwraca x.value, jeśli x jest refem, a w przeciwnym razie zwraca samo x. W połączeniu z MaybeRef pozwala to ujednolicić dane wejściowe.

import { unref, type MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
  const text = unref(name) // always a string
  return 'Hello ' + text
}

toValue: nowoczesny helper

Vue 3.3 dodało toValue, które rozpakowuje refy i wywołuje funkcje getter. Jest to preferowany sposób normalizowania danych wejściowych typu MaybeRefOrGetter.

import { toValue, type MaybeRefOrGetter } from 'vue'
function useLen(input: MaybeRefOrGetter<string>) {
  return computed(() => toValue(input).length)
}

Typowanie obiektów reaktywnych

reactive bezpośrednio wnioskuje typ obiektu — nie jest potrzebne .value. Aby jawnie określić typ, należy opatrzyć zmienną interfejsem obiektu.

import { reactive } from 'vue'
interface State { count: number; name: string }
const state: State = reactive({ count: 0, name: '' })

Szybki test

Sprawdźmy wiedzę na temat typowania composable i refów.

Podsumowanie

Opanowano typowanie Composition API:

  • ref wnioskuje typy; używaj ref<T>(), gdy wartość początkowa jest niewystarczająca.
  • Ref<T> i ComputedRef<T> służą do typowania refów i wartości obliczanych.
  • Typuj wartości zwracane przez composable, aby określić przejrzysty kontrakt.
  • MaybeRef<T> + unref()/toValue() akceptują elastyczne dane wejściowe.

Często zadawane pytania

Czy lekcja „Typowanie composable i refów” jest bezpłatna?

Tak — pełny tekst „Typowanie composable i refów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Typowanie composable i refów”?

Ref , ComputedRef , typowany zwrot z composable oraz MaybeRef . Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Typowanie composable i refów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfiguracja TypeScript w projektach Vue
  2. Typowane props i emits z defineProps/defineEmits
  3. Typowanie composable i refów
  4. Generyczne komponenty Vue
← Powrót do Vue Academy