Introducing Vue's new <script setup> compiler macro designed for declaring a component's emitted events effortlessly. The argument expected is identical to the component's emits option.

Take a look at this runtime declaration example:

const emit = defineEmits(['change', 'update'])

Below is an example of type-based declaration:

const emit = defineEmits<{
  (event: 'change'): void
  (event: 'update', id: number): void
}>()

emit('change')
emit('update', 1)

Remember, this feature can only be utilized within <script setup>, it gets optimized in the final output, and should not actually be invoked during runtime.

As of June 2023: The usage of defineEmits with the setup script renders this answer outdated, but it's still possible to extend Vue in order to incorporate types on the setup context object. It's important to note that this method is only compatible with versions preceding 3.2.46:

One can avoid installing vue-typed-emit and instead opt for this approach: Begin by defining an interface specifying the structure your events should adhere to, where the event key is 'event' and the type represents the emitted event's type 'args'.

interface Events {
    foo?: string;
    bar: number;
    baz: { a: string, b: number };
}

You can then import and utilize the existing SetupContext interface from Vue, extending it to impose additional constraints on the emit functions parameters.

interface SetupContextExtended<Event extends Record<string, any>> extends SetupContext {
    emit: <Key extends keyof Event>(event: Key, payload: Event[Key]) => void;
}

This interface essentially supersedes the current

emit(event: string, args: any) => void

with an emit function that receives 'event' as a key of the 'Events' interface and its corresponding type as 'args'.

Subsequently, you can define the setup function within the component, substituting SetupContext with SetupContextExtended while supplying the 'Events' interface.

    setup(props, context: SetupContextExtended<Events>) {
        context.emit('foo', 1);                 // TypeError - 1 should be string
        context.emit('update', 'hello');        // TypeError - 'update' does not exist on type Events
        context.emit('foo', undefined);         // Success
        context.emit('baz', { a: '', b: 0 });   // Success
    }

Example of a functional component:

<script lang="ts">
import { defineComponent, SetupContext } from 'vue';

interface Events {
    foo?: string;
    bar: number;
    baz: { a: string, b: number };
}

interface SetupContextExtended<Event extends Record<string, any>> extends SetupContext {
    emit: <Key extends keyof Event>(event: Key, payload: Event[Key]) => void;
}

export default defineComponent({
    name: 'MyComponent',
    setup(props, context: SetupContextExtended<Events>) {
        context.emit('foo', 1);                 // TypeError - 1 should be string
        context.emit('update', 'hello');        // TypeError - 'update' does not exist on type Events
        context.emit('foo', undefined);         // Success
        context.emit('baz', { a: '', b: 0 });   // Success
    }
});
</script>

To make this extended type available across all new and existing components - You have the option to enhance the Vue module itself to include the custom SetupContextExtended interface in your current imports. In this illustration, it's included in shims-vue.d.ts, however, feel free to place it in a separate file if desired.

// shims-vue.d.ts
import * as vue from 'vue';

// Pre-existing content
declare module '*.vue' {
    import type { DefineComponent } from 'vue';
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

declare module 'vue' {
    export interface SetupContextExtended<Event extends Record<string, any>> extends vue.SetupContext {
        emit: <Key extends keyof Event>(event: Key, payload: Event[Key]) => void;
    }
}

Finalized component with enhanced Vue module:

<script lang="ts">
import { defineComponent, SetupContextExtended } from 'vue';

interface Events {
    foo?: string;
    bar: number;
    baz: { a: string, b: number };
}

export default defineComponent({
    name: 'MyComponent',
    setup(props, context: SetupContextExtended<Events>) {
        context.emit('baz', { a: '', b: 0 });   // Success
    }
});
</script>

Personally, I prefer to define and export the Events interface in the parent component and then import it into the child component so that the parent dictates the contract governing the emit events of the child.

My current approach involves using

<script setup lang="ts">

to strongly type and validate the payload of my emits:

<script setup lang="ts">
defineEmits({
  newIndex(index: number) {
    return index >= 0
  },
})

// const items = [{ text: 'some text' }, ...]
</script>

I then proceed to emit events in the following manner:

<template>
  <div
    v-for="(item, index) in items"
    :key="index"
    @click="$emit('newIndex', index)"
  >
    {{ item.text }}
  </div>
</template>

If I only need to declare and type the emit without implementing its behavior, I would use this syntax:

defineEmits<{
  (event: 'newIndex', index: number): void
}>()

If you are utilizing <script setup>, then utilizing defineEmits (as suggested by guangzan) is suitable. You can refer to the official documentation at: https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits

Alternatively, if you prefer using

<script lang="ts">

with a setup function, there are 2 options for specifying strongly typed event payloads.

Option #1

You can check out the informative answer provided by Kiaan Edge-Ford. This option is particularly useful if you wish to enforce consistent Events across multiple components.

Option #2 (more concise)

It is not explicitly stated in the official Vue documentation yet, but emits: actually supports an alternative format. Instead of an array of strings, it can be an object of functions. For example:

export default defineComponent({
  props: ...
  emits: ['set-field', 'update:is-valid']
  ...

You can transform it into something like this:

export default defineComponent({
  props: ...
  emits: {
    // eslint-disable-next-line unused-imports/no-unused-vars, no-useless-computed-key, object-shorthand
    ['set-field'](payload: { partA: number, partB: string, partC: boolean }) { return true; },
    // eslint-disable-next-line unused-imports/no-unused-vars, no-useless-computed-key, object-shorthand
    ['update:is-valid'](payload: boolean) { return true; },
  },
  ...

The eslint comments may or may not be necessary to avoid warnings. The purpose of the function here is validation, so returning true signifies that it is always valid.

With this setup, your environment will alert you if the corresponding emit(...) function does not send the correct payload.