feat: add component $emit typing support (#846)

src/apis/createApp.ts

@@ -1,5 +1,5 @@
 import type Vue from 'vue'
-import { VueConstructor } from 'vue/types/umd'
+import { VueConstructor } from 'vue'
 import { getVueConstructor } from '../runtimeContext'
 import { warn } from '../utils'
 

src/apis/createElement.ts

@@ -1,10 +1,8 @@
-import Vue from 'vue'
+import type { CreateElement } from 'vue'
 import { getVueConstructor, getCurrentInstance } from '../runtimeContext'
 import { defineComponentInstance } from '../utils/helper'
 import { warn } from '../utils'
 
-type CreateElement = Vue['$createElement']
-
 let fallbackCreateElement: CreateElement
 
 export const createElement = function createElement(...args: any) {

src/component/componentOptions.ts

@@ -1,5 +1,5 @@
 import Vue, { VNode, ComponentOptions as Vue2ComponentOptions } from 'vue'
-import { SetupContext } from '../runtimeContext'
+import { EmitsOptions, SetupContext } from '../runtimeContext'
 import { Data } from './common'
 import { ComponentPropsOptions, ExtractPropTypes } from './componentProps'
 import { ComponentRenderProxy } from './componentProxy'
@@ -8,13 +8,6 @@ export { ComponentPropsOptions } from './componentProps'
 export type ComputedGetter<T> = (ctx?: any) => T
 export type ComputedSetter<T> = (v: T) => void
 
-export type ObjectEmitsOptions = Record<
-  string,
-  ((...args: any[]) => any) | null
->
-
-export type EmitsOptions = ObjectEmitsOptions | string[]
-
 export interface WritableComputedOptions<T> {
   get: ComputedGetter<T>
   set: ComputedSetter<T>
@@ -39,7 +32,10 @@ interface ComponentOptionsBase<
   Props,
   D = Data,
   C extends ComputedOptions = {},
-  M extends MethodOptions = {}
+  M extends MethodOptions = {},
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {}
 > extends Omit<
     Vue2ComponentOptions<Vue, D, M, C, Props>,
     'data' | 'computed' | 'method' | 'setup' | 'props'
@@ -67,37 +63,52 @@ export type ComponentOptionsWithProps<
   D = Data,
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {},
   Props = ExtractPropTypes<PropsOptions>
 > = ComponentOptionsBase<Props, D, C, M> & {
   props?: PropsOptions
-  emits?: (EmitsOptions | string[]) & ThisType<void>
+  emits?: Emits & ThisType<void>
   setup?: SetupFunction<Props, RawBindings>
-} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M>>
+} & ThisType<
+    ComponentRenderProxy<Props, RawBindings, D, C, M, Mixin, Extends, Emits>
+  >
 
 export type ComponentOptionsWithArrayProps<
   PropNames extends string = string,
   RawBindings = Data,
   D = Data,
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {},
   Props = Readonly<{ [key in PropNames]?: any }>
 > = ComponentOptionsBase<Props, D, C, M> & {
   props?: PropNames[]
-  emits?: (EmitsOptions | string[]) & ThisType<void>
+  emits?: Emits & ThisType<void>
   setup?: SetupFunction<Props, RawBindings>
-} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M>>
+} & ThisType<
+    ComponentRenderProxy<Props, RawBindings, D, C, M, Mixin, Extends, Emits>
+  >
 
 export type ComponentOptionsWithoutProps<
   Props = {},
   RawBindings = Data,
   D = Data,
   C extends ComputedOptions = {},
-  M extends MethodOptions = {}
+  M extends MethodOptions = {},
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {}
 > = ComponentOptionsBase<Props, D, C, M> & {
   props?: undefined
-  emits?: (EmitsOptions | string[]) & ThisType<void>
+  emits?: Emits & ThisType<void>
   setup?: SetupFunction<Props, RawBindings>
-} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M>>
+} & ThisType<
+    ComponentRenderProxy<Props, RawBindings, D, C, M, Mixin, Extends, Emits>
+  >
 
 export type WithLegacyAPI<T, D, C, M, Props> = T &
   Omit<Vue2ComponentOptions<Vue, D, M, C, Props>, keyof T>

src/component/componentProxy.ts

@@ -21,9 +21,29 @@ import {
   ComponentInternalInstance,
   EmitFn,
   EmitsOptions,
+  ObjectEmitsOptions,
   Slots,
 } from '../runtimeContext'
 
+type EmitsToProps<T extends EmitsOptions> = T extends string[]
+  ? {
+      [K in string & `on${Capitalize<T[number]>}`]?: (...args: any[]) => any
+    }
+  : T extends ObjectEmitsOptions
+  ? {
+      [K in string &
+        `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}`
+        ? T[Uncapitalize<C>] extends null
+          ? (...args: any[]) => any
+          : (
+              ...args: T[Uncapitalize<C>] extends (...args: infer P) => any
+                ? P
+                : never
+            ) => any
+        : never
+    }
+  : {}
+
 export type ComponentInstance = InstanceType<VueConstructor>
 
 // public properties exposed on the proxy, which is used as the render context
@@ -34,6 +54,9 @@ export type ComponentRenderProxy<
   D = {}, // return from data()
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {},
   PublicProps = P,
   Defaults = {},
   MakeDefaultsOptional extends boolean = false
@@ -45,28 +68,37 @@ export type ComponentRenderProxy<
       : P & PublicProps
   >
   $attrs: Data
+  $emit: EmitFn<Emits>
 } & Readonly<P> &
   ShallowUnwrapRef<B> &
   D &
   M &
   ExtractComputedReturns<C> &
-  Omit<Vue, '$data' | '$props' | '$attrs'>
+  Omit<Vue, '$data' | '$props' | '$attrs' | '$emit'>
 
 // for Vetur and TSX support
 type VueConstructorProxy<
   PropsOptions,
   RawBindings,
   Data,
   Computed extends ComputedOptions,
-  Methods extends MethodOptions
-> = VueConstructor & {
+  Methods extends MethodOptions,
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {},
+  Props = ExtractPropTypes<PropsOptions> &
+    ({} extends Emits ? {} : EmitsToProps<Emits>)
+> = Omit<VueConstructor, never> & {
   new (...args: any[]): ComponentRenderProxy<
-    ExtractPropTypes<PropsOptions>,
+    Props,
     ShallowUnwrapRef<RawBindings>,
     Data,
     Computed,
     Methods,
-    ExtractPropTypes<PropsOptions>,
+    Mixin,
+    Extends,
+    Emits,
+    Props,
     ExtractDefaultPropTypes<PropsOptions>,
     true
   >
@@ -81,7 +113,10 @@ export type VueProxy<
   RawBindings,
   Data = DefaultData<Vue>,
   Computed extends ComputedOptions = DefaultComputed,
-  Methods extends MethodOptions = DefaultMethods<Vue>
+  Methods extends MethodOptions = DefaultMethods<Vue>,
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {}
 > = Vue2ComponentOptions<
   Vue,
   ShallowUnwrapRef<RawBindings> & Data,
@@ -90,7 +125,16 @@ export type VueProxy<
   PropsOptions,
   ExtractPropTypes<PropsOptions>
 > &
-  VueConstructorProxy<PropsOptions, RawBindings, Data, Computed, Methods>
+  VueConstructorProxy<
+    PropsOptions,
+    RawBindings,
+    Data,
+    Computed,
+    Methods,
+    Mixin,
+    Extends,
+    Emits
+  >
 
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)

src/component/defineAsyncComponent.ts

@@ -8,15 +8,16 @@ import {
   ComponentOptionsWithProps,
 } from './componentOptions'
 
-type ComponentOptions =
+type Component = VueProxy<any, any, any, any, any>
+
+type ComponentOrComponentOptions =
+  // Component
+  | Component
+  // ComponentOptions
   | ComponentOptionsWithoutProps
   | ComponentOptionsWithArrayProps
   | ComponentOptionsWithProps
 
-type Component = VueProxy<any, any, any, any, any>
-
-type ComponentOrComponentOptions = ComponentOptions | Component
-
 export type AsyncComponentResolveResult<T = ComponentOrComponentOptions> =
   | T
   | { default: T } // es modules

src/component/defineComponent.ts

@@ -9,45 +9,109 @@ import {
 import { VueProxy } from './componentProxy'
 import { Data } from './common'
 import { HasDefined } from '../types/basic'
+import { EmitsOptions } from '../runtimeContext'
 
-// overload 1: object format with no props
+/**
+ * overload 1: object format with no props
+ */
 export function defineComponent<
   RawBindings,
   D = Data,
   C extends ComputedOptions = {},
-  M extends MethodOptions = {}
+  M extends MethodOptions = {},
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {}
 >(
-  options: ComponentOptionsWithoutProps<{}, RawBindings, D, C, M>
-): VueProxy<{}, RawBindings, D, C, M>
-
-// overload 2: object format with array props declaration
-// props inferred as { [key in PropNames]?: any }
-// return type is for Vetur and TSX support
+  options: ComponentOptionsWithoutProps<
+    {},
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    Emits
+  >
+): VueProxy<{}, RawBindings, D, C, M, Mixin, Extends, Emits>
+/**
+ * overload 2: object format with array props declaration
+ * props inferred as `{ [key in PropNames]?: any }`
+ *
+ * return type is for Vetur and TSX support
+ */
 export function defineComponent<
   PropNames extends string,
   RawBindings = Data,
   D = Data,
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {},
   PropsOptions extends ComponentPropsOptions = ComponentPropsOptions
 >(
-  options: ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M>
-): VueProxy<Readonly<{ [key in PropNames]?: any }>, RawBindings, D, C, M>
+  options: ComponentOptionsWithArrayProps<
+    PropNames,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    Emits
+  >
+): VueProxy<
+  Readonly<{ [key in PropNames]?: any }>,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  Emits
+>
 
-// overload 3: object format with object props declaration
-// see `ExtractPropTypes` in ./componentProps.ts
+/**
+ * overload 3: object format with object props declaration
+ *
+ * see `ExtractPropTypes` in './componentProps.ts'
+ */
 export function defineComponent<
   Props,
   RawBindings = Data,
   D = Data,
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
+  Mixin = {},
+  Extends = {},
+  Emits extends EmitsOptions = {},
   PropsOptions extends ComponentPropsOptions = ComponentPropsOptions
 >(
   options: HasDefined<Props> extends true
-    ? ComponentOptionsWithProps<PropsOptions, RawBindings, D, C, M, Props>
-    : ComponentOptionsWithProps<PropsOptions, RawBindings, D, C, M>
-): VueProxy<PropsOptions, RawBindings, D, C, M>
+    ? ComponentOptionsWithProps<
+        PropsOptions,
+        RawBindings,
+        D,
+        C,
+        M,
+        Mixin,
+        Extends,
+        Emits,
+        Props
+      >
+    : ComponentOptionsWithProps<
+        PropsOptions,
+        RawBindings,
+        D,
+        C,
+        M,
+        Mixin,
+        Extends,
+        Emits
+      >
+): VueProxy<PropsOptions, RawBindings, D, C, M, Mixin, Extends, Emits>
+
 // implementation, close to no-op
 export function defineComponent(options: any) {
   return options as any