Typing emits in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the emitted event payload type in this Vue component?

Consider this Vue 3 component using defineEmits with TypeScript. What is the type of the payload emitted by the update event?

Vue

const emit = defineEmits<{ (e: 'update', value: number): void }>()

function updateValue() {
  emit('update', 42)
}

A A number value

B An object with a number property

C A string value

D No payload

💡 Hint

Look at the second parameter type in the emit definition.

The emit is typed to accept an event named 'update' with a payload of type number. So the emitted payload is a number.

📝 Syntax

intermediate

Which option correctly types multiple emits in Vue 3?

You want to type two emits: 'save' with no payload and 'delete' with a string payload. Which defineEmits syntax is correct?

A const emit = defineEmits({ save: null, delete: String })

B const emit = defineEmits(['save', 'delete'])

C const emit = defineEmits<{ save: void; delete: string }>()

D const emit = defineEmits<{ (e: 'save'): void; (e: 'delete', id: string): void }>()

💡 Hint

Use function overload syntax for multiple typed emits.

Option D uses function overloads to type each event and its payload correctly. Other options are either untyped or invalid.

🔧 Debug

advanced

Why does this Vue component emit cause a TypeScript error?

This component emits an event 'change' with a string payload, but TypeScript shows an error on emit call. Why?

Vue

const emit = defineEmits<{ (e: 'change', value: number): void }>()

emit('change', 'hello')

A Emits must not have any payload

B The emitted payload type does not match the defined type

C The emit function is not called inside setup

D The event name 'change' is not defined in emits

💡 Hint

Check the type of the second argument in the emit call.

The emit is defined to accept a number payload for 'change', but the code emits a string, causing a type error.

❓ state_output

advanced

What is the output when emitting an event with typed emits in Vue 3?

Given this component, what will be logged when trigger is called?

Vue

const emit = defineEmits<{ (e: 'log', message: string): void }>()

function trigger() {
  emit('log', 'Hello Vue')
  console.log('Event emitted')
}

trigger()

A TypeScript error

B No output

C Event emitted

D Hello Vue

💡 Hint

Emitting an event does not print anything by itself.

The emit call triggers an event but does not produce console output. Only the console.log prints 'Event emitted'.

🧠 Conceptual

expert

Why use defineEmits with TypeScript in Vue 3?

Which is the main benefit of typing emits with defineEmits in Vue 3?

A It enforces correct event names and payload types at compile time

B It automatically registers events globally

C It replaces the need for props in components

D It enables emitting events without any parameters

💡 Hint

Think about what TypeScript helps prevent.

Typing emits helps catch mistakes like wrong event names or wrong payload types before running the app.