What is the best way to retrieve the argument type of an SFC component's event?

Question

What is the best way to retrieve the argument type of an SFC component's event?

Imagine I have a situation where there is an SFC component containing a save emit:

// ChildComponent.vue
const emit = defineEmits<{
  save: [data: { new: Row[]; removed: Row[] }];
}>();

If I needed to access the new and removed properties in a parent component, this would be the approach:

// ParentComponent.vue
<ChildComponent 
  @save="($event) => {
    performAPIRemove($event.removed); // TypeScript can correctly infer the type of `$event`
  }"
/>

However, let's say I want to define the event callback as a named function. How could I determine the type of the child component's emit?

// ParentComponent.vue
// A possible solution might involve...
function saveCallback(event: typeof ChildComponent.emits.save) {
  performAPIRemove(event.removed)
}

javascript typescript vue.js vue-script-setup

Answer 1

Answer №1

My recommendation is to start by creating a new interface in your .ts file, for example:

export interface EmitChildren {
  add: Item[];
  update: Item[];
}

Next, within your child component, you can define the emit function using this type:

const emit = defineEmits<{
  action: [payload: EmitChildren];
}>();

Finally, when defining your callback function, ensure it accepts the ChildEmit parameters, like so:

function handleAction(event: EmitChildren) {
  executeChanges(event.update);
}

Answer 2

My recommendation is to start by creating a new interface in your .ts file, for example:

export interface EmitChildren {
  add: Item[];
  update: Item[];
}

Next, within your child component, you can define the emit function using this type:

const emit = defineEmits<{
  action: [payload: EmitChildren];
}>();

Finally, when defining your callback function, ensure it accepts the ChildEmit parameters, like so:

function handleAction(event: EmitChildren) {
  executeChanges(event.update);
}

What is the best way to retrieve the argument type of an SFC component's event?

Answer №1

Similar questions

Issue with compiling Tailwind styles in Angular 16 development environment

Every time I submit the form, I aim to create a unique random string in the format of 'ZXCVBN'

How to efficiently update a child component in React using UseState and establish a connection back to the parent component

What is the best method to locate an element<T> within an Array[T] when <T> is an enum?

CSRF validation did not pass

When attempting to access the ref of a Text Input in a React Native Component, the refs are found

What is the best way to define the typings path for tsify?

Troubleshooting Bootstrap Select and dynamic rows problem in a Vue.js project

Retrieve the data entered in the submit button field

The use of `slot` attributes in Ionic has been deprecated and flagged by the eslint-plugin-vue

How can I update jQuery CSS method on resize event?

How come TypeScript tuples support the array.push method?

Utilize the Twitter Bootstrap modal feature to play autoplaying Youtube videos that automatically pause when

ways to instantly showcase the input's value within a DIV element

Transforming characters in a string using Javascript

Unable to pass a component property to a styled Material-UI Button

Share information by including the provider within the @component declaration in Angular

Incorporate meta tags containing images and titles into your Angular 6 project

Send JSON information using a POST request through the Fetch API and retrieve it on the Express backend server

Challenges faced with the Nativescript Software Development Kit