Props e emits tipados com defineProps/defineEmits
defineProps () genérico, tipos complexos, props opcionais e tipagem de emits.
Props e emits tipados com defineProps/defineEmits é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Tipando entradas e saídas de componentes
Com lang="ts", as macros defineProps e defineEmits aceitam tipos TypeScript diretamente. Isso fornece verificações em tempo de compilação sobre os dados que entram e saem de um componente.
Props a partir de uma interface
Passe um tipo ao genérico de defineProps. Uma interface mantém formatos complexos de Props legíveis e reutilizáveis.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Literais de tipo embutidos
Para componentes pequenos, um tipo de objeto embutido é suficiente — não é necessária uma interface separada.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Propriedades opcionais com ?
Marque uma propriedade como opcional com ?. Props opcionais são tipadas como T | undefined, e o componente pai pode omiti-las.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Tipos complexos de Props
Props podem ser matrizes, uniões ou formatos de objetos — qualquer coisa que o TypeScript consiga expressar.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Valores padrão com withDefaults
A forma que contém apenas o tipo não pode armazenar valores padrão, portanto envolva-a em withDefaults. O segundo argumento associa nomes de Props a valores padrão.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Valores padrão para objetos e matrizes
Os valores padrão de objetos e matrizes devem ser retornados por uma função fábrica, assim como na API de Opções, para evitar o compartilhamento de uma única instância entre componentes.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Declarando emits tipados
defineEmits pode receber um tipo que lista cada evento e sua carga útil como uma assinatura de chamada. Isso detecta tipos incorretos de carga útil em tempo de compilação.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Emitindo cargas úteis tipadas
Agora emit aceita apenas nomes de eventos válidos e tipos de carga útil correspondentes. Passar um número onde se espera uma string gera um erro de compilação.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}A sintaxe de tupla nomeada
O Vue 3.3+ oferece suporte a uma forma abreviada de objeto em que cada evento é associado a uma tupla de seus tipos de argumento — mais limpa que as assinaturas de chamada.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props e emits em conjunto
Um componente tipado típico declara ambos: entradas por meio de defineProps e saídas por meio de defineEmits, com verificação completa de ponta a ponta.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Verificação rápida
Teste seus conhecimentos sobre Props e emits tipados.
Recapitulação
Você aprendeu sobre E/S tipadas de componentes:
- Passe uma interface ou um tipo embutido para defineProps<T>().
- Use ? para Props opcionais e withDefaults para valores padrão (função fábrica para objetos/matrizes).
- defineEmits<T>() tipa nomes de eventos e cargas úteis.
- A forma de tupla (event: [payload]) é a abreviação moderna.
Perguntas Frequentes
A aula “Props e emits tipados com defineProps/defineEmits” é grátis?
Sim — o texto completo de “Props e emits tipados com defineProps/defineEmits” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Props e emits tipados com defineProps/defineEmits”?
defineProps () genérico, tipos complexos, props opcionais e tipagem de emits. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Props e emits tipados com defineProps/defineEmits”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configuração do TypeScript em projetos Vue
- Props e emits tipados com defineProps/defineEmits
- Tipagem de composables e refs
- Componentes Vue genéricos