Narcissistic Piano Mover

    vue-typed-emit
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    vue-typed-emit

    TypeScript utility type for Vue.js $emit

    BuildStatus Version Bundle Size Codacy Badge Total alerts Language grade: JavaScript Downloads LastCommit License

    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.

    Tests

    npm run test

    Build

    npm run build

    License

    MIT

    Install

    npm i vue-typed-emit

    DownloadsWeekly Downloads

    612

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    9.66 kB

    Total Files

    20

    Last publish

    Collaborators

    • 3vil_arthas