vue-typed-emit

vue-typed-emit

TypeScript utility type for Vue.js $emit

❗ This library is intended to be used with Vue <3. Vue 3 provided a way to type emits.

Installation

Via NPM

$ npm i vue-typed-emit -D

Via Yarn

$ yarn add vue-typed-emit --dev

Usage

Options API

import Vue from 'vue'
// import type { WithEvents } from 'vue-typed-emit' TypeScript 3.8+
import { WithEvents } from 'vue-typed-emit'

interface Events {
  foo: string
  bar: [string, number]
  baz: undefined
}

export default (Vue as WithEvents<Events>).extend({
  name: 'Component',
  methods: {
    method() {
      this.$emit('foo', 'foo')
      this.$emit('bar', 0)
      this.$emit('baz')
    },
  },
})

Extending extended components

// YourAwesomeExtendedComponent.vue
// ...

export default Vue.extend({
  // ...
  methods: {
    baz() {},
  },
  // ...
})

// ...
import YourAwesomeExtendedComponent from 'path/to/your/awewsome/extended/component'

export default (
  YourAwesomeExtendedComponent as WithEvents<
    WithEvents,
    typeof YourAwesomeExtendedComponent
  >
).extend({})

Composition API

import { SetupContext, defineComponent } from '@vue/composition-api'
// import type { CompositionAPIEmit } from 'vue-typed-emit' TypeScript 3.8+
import { CompositionAPIEmit } from 'vue-typed-emit'

interface Events {
  foo: string
  bar: [string, number]
  baz: undefined
}

interface ExtendedSetupContext extends SetupContext {
  emit: CompositionAPIEmit<Events>
}

export default defineComponent({
  name: 'Component',
  setup(props, { emit }: ExtendedSetupContext) {
    emit('foo', 'foo')
    emit('bar', 0)
    emit('baz')
  },
})

Motivation

If your project is written using TypeScript + Vue.js, likely your components have some "contracts" – props they receive and events they emit. vue-typed-emit is aimed to ensure that your components adhere to the contract they claimed when it comes to events emitting and corresponding payloads.

Caveats

Array payload

If event payload is type of of Array it should be defined this way.

interface Events {
  foo: [string[]]
}

Tests

npm run test

Build

npm run build

License

MIT