Props et événements typés avec defineProps/defineEmits
defineProps () générique, types complexes, props facultatives et typage des événements émis
Props et événements typés avec defineProps/defineEmits est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 les entrées et sorties des composants
Avec lang="ts", les macros defineProps et defineEmits acceptent directement les types TypeScript. Cela permet de vérifier à la compilation les données qui entrent dans un composant et celles qui en sortent.
Props à partir d’une interface
Transmettez un type au paramètre générique de defineProps. Une interface permet de conserver des structures de Props complexes, lisibles et réutilisables.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Littéraux de type intégrés
Pour les petits composants, un type d’objet intégré convient parfaitement : aucune interface distincte n’est nécessaire.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Propriétés facultatives avec ?
Rendez une propriété facultative avec ?. Les Props facultatives sont typées T | undefined et le parent peut ne pas les fournir.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Types de Props complexes
Les Props peuvent être des tableaux, des unions ou des structures d’objet : tout ce que TypeScript peut exprimer.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Valeurs par défaut avec withDefaults
La forme limitée aux types ne peut pas contenir de valeurs par défaut ; enveloppez-la donc dans withDefaults. Le deuxième argument associe les noms des Props à leurs valeurs par défaut.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Valeurs par défaut des objets et des tableaux
Les valeurs par défaut des objets et des tableaux doivent être renvoyées par une fonction fabrique, comme dans l’API Options, afin d’éviter de partager la même instance entre les composants.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Déclarer des événements typés
defineEmits peut recevoir un type qui répertorie chaque événement et sa charge utile sous la forme d’une signature d’appel. Cela détecte les types de charge utile incorrects dès la compilation.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Émettre des charges utiles typées
Désormais, emit n’accepte que les noms d’événements valides et les types de charge utile correspondants. Transmettre un nombre lorsqu’une chaîne est attendue provoque une erreur de compilation.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}La syntaxe des tuples nommés
Vue 3.3 et les versions ultérieures prennent en charge une forme abrégée sous forme d’objet, où chaque événement est associé à un tuple de types d’arguments : c’est plus clair que les signatures d’appel.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props et événements ensemble
Un composant typé classique déclare les deux : les entrées avec defineProps et les sorties avec defineEmits, le tout vérifié de bout en bout.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Vérification rapide
Vérifiez vos connaissances sur les Props et les événements typés.
Récapitulatif
Vous avez appris à typer les entrées et sorties des composants :
- Transmettez une interface ou un type intégré à defineProps<T>().
- Utilisez ? pour les Props facultatives et withDefaults pour les valeurs par défaut (une fabrique pour les objets et les tableaux).
- defineEmits<T>() spécifie les noms d’événements et les charges utiles.
- La forme tuple (event: [payload]) est la syntaxe abrégée moderne.
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
Questions Fréquemment Posées
La leçon « Props et événements typés avec defineProps/defineEmits » est-elle gratuite ?
Oui — le texte complet de « Props et événements typés avec defineProps/defineEmits » 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 « Props et événements typés avec defineProps/defineEmits » ?
defineProps () générique, types complexes, props facultatives et typage des événements émis 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 2 sur 4.
Combien de temps prend la leçon « Props et événements typés avec defineProps/defineEmits » ?
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