Vue Academy · Leçon

Typer les composables et les refs

Ref , ComputedRef , valeur de retour typée des composables et MaybeRef

Leçon 3 sur 413 étapes

Typer les composables et les refs est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Typer l’API de composition

Les composables sont simplement des fonctions, et les références sont simplement des conteneurs typés. L’ajout de types explicites rend vos composables sûrs à utiliser et offre une complétion automatique complète à leurs appelants.

Types de référence déduits

La plupart du temps, TypeScript déduit le type d’une référence à partir de sa valeur initiale. Un ref(0) devient automatiquement un Ref<number>.

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

Paramètres génériques explicites des références

Lorsque la valeur initiale ne peut pas exprimer le type complet — par exemple une valeur qui commence par null avant de devenir un objet — transmettez un paramètre générique explicite.

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

Le type Ref

Ref<T> décrit une référence modifiable dont le .value est de type T. Utilisez-le pour annoter des variables ou des paramètres de fonction qui reçoivent des références.

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

Le type ComputedRef

computed renvoie une ComputedRef<T> en lecture seule. Utilisez ce type lorsque vous annotez un composable qui renvoie des valeurs calculées.

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

Typer la valeur de retour d’un composable

Annotez la structure de retour afin que les utilisateurs voient exactement ce qu’ils obtiennent. Un type de retour explicite documente également le 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 }
}

Laisser l’inférence agir

Souvent, vous pouvez omettre le type de retour explicite et laisser TypeScript le déduire. Ajoutez un type explicite uniquement lorsque vous souhaitez établir un contrat public stable.

MaybeRef pour des entrées flexibles

MaybeRef<T> désigne une valeur qui peut être un simple T ou une Ref<T>. Cela permet aux composables d’accepter l’une ou l’autre forme.

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

Désenvelopper avec unref

unref(x) renvoie x.value si x est une référence, et x lui-même dans le cas contraire. Associez-le à MaybeRef pour normaliser l’entrée.

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

toValue : l’assistant moderne

Vue 3.3 a ajouté toValue, qui désenveloppe les références et appelle les fonctions accesseurs. C’est la méthode recommandée pour normaliser les entrées MaybeRefOrGetter.

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

Typer les objets réactifs

reactive déduit directement le type de l’objet : aucun .value n’est nécessaire. Pour un typage explicite, annotez la variable avec l’interface de l’objet.

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

Vérification rapide

Vérifiez vos connaissances sur le typage des composables et des références.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez appris à typer l’API de composition :

ref déduit les types ; utilisez ref<T>() lorsque la valeur initiale est insuffisante.
Ref<T> et ComputedRef<T> annotent les références et les valeurs calculées.
Typez les valeurs de retour des composables pour établir un contrat clair.
MaybeRef<T> + unref()/toValue() acceptent des entrées flexibles.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Typer les composables et les refs » est-elle gratuite ?

Oui — le texte complet de « Typer les composables et les refs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Typer les composables et les refs » ?

Ref , ComputedRef , valeur de retour typée des composables et MaybeRef Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Typer les composables et les refs » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer TypeScript dans les projets Vue
Props et événements typés avec defineProps/defineEmits
Typer les composables et les refs
Composants Vue génériques

← Retour à Vue Academy