diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 8aa2c28ddb..c1a44de5a8 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -212,7 +212,7 @@ const Component = defineComponent({ type: Object as PropType, // Make sure to use arrow functions default: () => ({ - title: "Arrow Function Expression" + title: 'Arrow Function Expression' }), validator: (book: Book) => !!book.title }, @@ -221,7 +221,7 @@ const Component = defineComponent({ // Or provide an explicit this parameter default(this: void) { return { - title: "Function Expression" + title: 'Function Expression' } }, validator(this: void, book: Book) { @@ -232,6 +232,30 @@ const Component = defineComponent({ }) ``` +## Annotating emits + +We can annotate a payload for the emitted event. Also, all non-declared emitted events will throw a type error when called: + +```ts +const Component = defineComponent({ + emits: { + addBook(payload: { bookName: string }) { + // perform runtime validation + return payload.bookName.length > 0 + } + }, + methods: { + onSubmit() { + this.$emit('addBook', { + bookName: 123 // Type error! + }) + + this.$emit('non-declared-event') // Type error! + } + } +}) +``` + ## Using with Composition API On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.