Subscribe on changes!

Typescript: incompatible "this" in component when adding emits

avatar
Apr 13th 2021

Version

3.0.11

Reproduction link

https://github.com/danielvy/vue-emits.git

Steps to reproduce

run npm run build

See App.vue

What is expected?

Typescript project should compile.

What is actually happening?

Typescript reports an error:

TS2684: The 'this' context of type 'ComponentPublicInstance<{}, {}, {}, {}, { test(): void; }, "test"[], {}, {}, false, ComponentOptionsBase<{}, {}, void, {}, { test(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, "test"[], string, {}>>' is not assignable to method's 'this' of type 'void | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.
  Type 'ComponentPublicInstance<{}, {}, {}, {}, { test(): void; }, "test"[], {}, {}, false, ComponentOptionsBase<{}, {}, void, {}, { test(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, "test"[], string, {}>>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.
    Type 'ComponentPublicInstance<{}, {}, {}, {}, { test(): void; }, "test"[], {}, {}, false, ComponentOptionsBase<{}, {}, void, {}, { test(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, "test"[], string, {}>>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Record<string, unknown>; $refs: Record<string, unknown>; $slots: Readonly<InternalSlots>; ... 7 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; }'.
      Types of property '$emit' are incompatible.
        Type '(event: "test", ...args: any[]) => void' is not assignable to type '(event: string, ...args: any[]) => void'.
          Types of parameters 'event' and 'event' are incompatible.
            Type 'string' is not assignable to type '"test"'.
    17 |
    18 |        mounted() {
  > 19 |                this.$nextTick(() => {
       |                ^^^^
    20 |
    21 |                });
    22 |        },
avatar
Jun 9th 2021

Any update on when this will be merged?