Skip to content

TypeScript Emits

Type emits so parents get autocomplete and payload checking. This lesson covers practical patterns, syntax, and mistakes to avoid.

Typing Component Emits

Type emits so parents get autocomplete and payload checking.

Use the typed defineEmits form in script setup.

const emit = defineEmits<{ select: [id: string]; close: [] }>()
emit('select', '42')

Typed payloads for select/close.

Validation

Type system covers compile-time; still validate external input.
  • Handle loading and errors.
  • Keep composables tested.
  • Prefer TypeScript when you can.
  • Measure before optimizing.

TypeScript Emits Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
tuple payload [id: string] Modern
call emit checked TS
kebab listen @select Template
defineModel v-model Related
expose refs Other
tests emit spies Vitest

Event Naming

Use declarative action names without on prefix in emit definitions.

Common Mistakes

  • Untyped emit('update', anyThing).
  • Mismatched parent listeners.

Key Takeaways

  • TypeScript Emits shows up often in Vue apps.
  • Practice with a demo.
  • Prefer clear APIs.
  • Read official docs for edge cases.

Pro Tip

Keep emit payloads small and typed — prefer ids over whole huge objects when enough.

You now understand typescript emits. Next, continue with TypeScript Composables to keep building your Vue skills.