Tipizzazione di composable e ref
Ref , ComputedRef , valore restituito tipizzato dai composable, MaybeRef .
Tipizzazione di composable e ref è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Tipizzare la Composition API
I composable sono semplicemente funzioni e i ref sono semplicemente contenitori tipizzati. Aggiungere tipi espliciti rende i composable sicuri da usare e offre ai chiamanti il completamento automatico completo.
Tipi inferiti dei ref
Nella maggior parte dei casi TypeScript inferisce il tipo di un ref dal suo valore iniziale. Un ref(0) è automaticamente un Ref<number>.
import { ref } from 'vue'
const count = ref(0) // Ref<number>
const name = ref('Coddy') // Ref<string>Generici espliciti per i ref
Quando il valore iniziale non è sufficiente a esprimere il tipo completo, ad esempio per un valore che inizia come null ma diventa un oggetto, passate un generico esplicito.
interface User { id: number; name: string }
const user = ref<User | null>(null)Il tipo Ref
Ref<T> descrive un ref scrivibile il cui .value è di tipo T. Usatelo per annotare variabili o parametri di funzione che ricevono dei ref.
import type { Ref } from 'vue'
function useDouble(n: Ref<number>) {
return computed(() => n.value * 2)
}Il tipo ComputedRef
computed restituisce un ComputedRef<T> di sola lettura. Usate questo tipo quando annotate un composable che restituisce valori calcolati.
import type { ComputedRef } from 'vue'
const doubled: ComputedRef<number> = computed(() => count.value * 2)Tipizzare il valore restituito da un composable
Annotate la struttura restituita, così chi utilizza il composable vede esattamente ciò che riceve. Un tipo restituito esplicito documenta inoltre il 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 }
}Lasciare lavorare l'inferenza
Spesso potete omettere il tipo restituito esplicito e lasciare che TypeScript lo inferisca. Aggiungete un tipo esplicito solo quando desiderate un contratto pubblico stabile.
MaybeRef per input flessibili
MaybeRef<T> indica un valore che può essere un semplice T oppure un Ref<T>. In questo modo i composable possono accettare entrambe le forme.
import type { MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
// name could be 'Coddy' or ref('Coddy')
}Rimuovere il wrapping con unref
unref(x) restituisce x.value se x è un ref; altrimenti restituisce direttamente x. Abbinatelo a MaybeRef per normalizzare l'input.
import { unref, type MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
const text = unref(name) // always a string
return 'Hello ' + text
}toValue: l'helper moderno
Vue 3.3 ha aggiunto toValue, che rimuove il wrapping dei ref e chiama anche le funzioni getter. È il modo consigliato per normalizzare gli input MaybeRefOrGetter.
import { toValue, type MaybeRefOrGetter } from 'vue'
function useLen(input: MaybeRefOrGetter<string>) {
return computed(() => toValue(input).length)
}Tipizzare gli oggetti reattivi
reactive inferisce direttamente il tipo dell'oggetto: non serve .value. Per una tipizzazione esplicita, annotate la variabile con l'interfaccia dell'oggetto.
import { reactive } from 'vue'
interface State { count: number; name: string }
const state: State = reactive({ count: 0, name: '' })Verifica rapida
Verificate la vostra conoscenza della tipizzazione dei composable e dei ref.
Riepilogo
Avete imparato a tipizzare la Composition API:
- ref inferisce i tipi; usate ref<T>() quando il valore iniziale non è sufficiente.
- Ref<T> e ComputedRef<T> annotano ref e valori computed.
- Tipizzate i valori restituiti dai composable per definire un contratto chiaro.
- MaybeRef<T> + unref()/toValue() accettano input flessibili.
Domande Frequenti
La lezione «Tipizzazione di composable e ref» è gratuita?
Sì — il testo completo di «Tipizzazione di composable e ref» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Tipizzazione di composable e ref»?
Ref , ComputedRef , valore restituito tipizzato dai composable, MaybeRef . Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Tipizzazione di composable e ref»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di TypeScript nei progetti Vue
- Props ed emit tipizzati con defineProps/defineEmits
- Tipizzazione di composable e ref
- Componenti Vue generici