add test for vue-class-component and better renderproxy type

package.json

@@ -38,6 +38,7 @@
     "lint": "prettier --write --parser typescript \"{src,test,test-dts}/**/*.ts?(x)\" && prettier --write \"{src,test}/**/*.js\"",
     "test": "yarn test-dts && yarn test-unit",
     "test-unit": "cross-env NODE_ENV=test jest",
+    "test-vue2": "tsc -p ./test-dts/tsconfig.json && yarn build && tsc -p ./test-dts/tsconfig.build.json",
     "test-dts": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.vue3.json && yarn build && tsc -p ./test-dts/tsconfig.build.json",
     "update-readme": "node ./scripts/update-readme.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
@@ -76,6 +77,8 @@
     "ts-jest": "^26.5.6",
     "typescript": "^4.4.4",
     "vue": "^2.6.14",
+    "vue-class-component": "^7.2.6",
+    "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.3",
     "vue-server-renderer": "^2.6.14",
     "vue3": "npm:vue@3.2.21"

src/component/componentProxy.ts

@@ -69,7 +69,23 @@ export type ComponentRenderProxy<
       : P & PublicProps
   >
   $attrs: Record<string, string>
-  $emit: ComponentRenderEmitFn<Emits>
+  $emit: ComponentRenderEmitFn<
+    Emits,
+    keyof Emits,
+    ComponentRenderProxy<
+      P,
+      B,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      Emits,
+      PublicProps,
+      Defaults,
+      MakeDefaultsOptional
+    >
+  >
 } & Readonly<P> &
   ShallowUnwrapRef<B> &
   D &

src/runtimeContext.ts

@@ -1,5 +1,4 @@
 import type { VueConstructor, VNode } from 'vue'
-import Vue$1 from 'vue'
 import { bindCurrentScopeToVM, EffectScope } from './apis/effectScope'
 import { ComponentInstance, Data } from './component'
 import {
@@ -10,6 +9,7 @@ import {
   UnionToIntersection,
   isFunction,
 } from './utils'
+import Vue$1 from 'vue'
 
 let vueDependency: VueConstructor | undefined = undefined
 
@@ -139,8 +139,8 @@ export type EmitFn<
 export type ComponentRenderEmitFn<
   Options = ObjectEmitsOptions,
   Event extends keyof Options = keyof Options,
-  V extends Vue$1 = Vue$1
-> = EmitFn<Options, Event, V>
+  T extends Vue$1 | void = void
+> = EmitFn<Options, Event, T>
 
 export type Slots = Readonly<InternalSlots>
 

test-dts/defineComponent.test-d.tsx

@@ -14,6 +14,7 @@ import {
   IsUnion,
   h,
 } from './index'
+import { Component, Mixins } from 'vue-property-decorator'
 
 describe('with object props', () => {
   interface ExpectedProps {
@@ -905,7 +906,7 @@ describe('emits', () => {
   // with `v-on` listeners.
 
   // with object emits
-  defineComponent({
+  const testComponent = defineComponent({
     emits: {
       click: (n: number) => typeof n === 'number',
       input: (b: string) => b.length > 1,
@@ -928,6 +929,7 @@ describe('emits', () => {
     // },
     created() {
       this.$emit('click', 1)
+      this.$emit('click', 1).$emit('click', 1)
       this.$emit('input', 'foo')
       //  @ts-expect-error
       expectError(this.$emit('nope'))
@@ -939,6 +941,8 @@ describe('emits', () => {
       expectError(this.$emit('input'))
       //  @ts-expect-error
       expectError(this.$emit('input', 1))
+      //  @ts-expect-error
+      expectError(this.$emit('input', 1).$emit('nope'))
     },
     // mounted() {
     //   // #3599
@@ -961,6 +965,25 @@ describe('emits', () => {
     // },
   })
 
+  // interface of vue2's $emit has no generics, untyped types will be event: string, ...args: any[]) => this
+  // but we can get correct type when we use correct params
+  // maybe we need vue 2.7 to fully support emit type
+  @Component({})
+  class MixinComponent extends Mixins(testComponent) {
+    created() {
+      this.$emit('click', 1)
+      this.$emit('input', 'foo')
+      this.$emit('blah')
+      this.$emit('blah').$emit('click', 1)
+      this.$emit('blah').$emit('click')
+      // limit of ts overload, can not get full type of function, but we can get enough hint by ComponentRenderProxy
+      //  @ts-expect-error
+      this.$emit()
+    }
+  }
+
+  Mixins(MixinComponent)
+
   // with array emits
   // defineComponent({
   //   emits: ['foo', 'bar'],

tsconfig.json

@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "skipLibCheck": true,
     "esModuleInterop": true,
+    "experimentalDecorators": true,
     "strict": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,