types: add emits and slots type to FunctionalComponent

Author: sxzz

packages/dts-test/component.test-d.ts

@@ -8,14 +8,22 @@ import {
   FunctionalComponent,
   ComponentPublicInstance,
   toRefs,
-  SetupContext
+  SetupContext,
+  EmitsOptions
 } from 'vue'
 import { describe, expectAssignable, expectType, IsAny } from './utils'
 
-declare function extractComponentOptions<Props, RawBindings>(
-  obj: Component<Props, RawBindings>
+declare function extractComponentOptions<
+  Props,
+  RawBindings,
+  Emits extends EmitsOptions | Record<string, any[]>,
+  Slots extends Record<string, any>
+>(
+  obj: Component<Props, RawBindings, any, any, any, Emits, Slots>
 ): {
   props: Props
+  emits: Emits
+  slots: Slots
   rawBindings: RawBindings
   setup: ShallowUnwrapRef<RawBindings>
 }
@@ -455,11 +463,27 @@ describe('functional', () => {
   })
 
   describe('typed', () => {
-    const MyComponent: FunctionalComponent<{ foo: number }> = (_, _2) => {}
+    type Props = { foo: number }
+    type Emits = { change: [value: string]; inc: [value: number] }
+    type Slots = { default: (scope: { foo: string }) => any }
+
+    const MyComponent: FunctionalComponent<Props, Emits, Slots> = (
+      props,
+      { emit, slots }
+    ) => {
+      expectType<Props>(props)
+      expectType<{
+        (event: 'change', value: string): void
+        (event: 'inc', value: number): void
+      }>(emit)
+      expectType<Slots>(slots)
+    }
 
-    const { props } = extractComponentOptions(MyComponent)
+    const { props, emits, slots } = extractComponentOptions(MyComponent)
 
-    expectType<number>(props.foo)
+    expectType<Props>(props)
+    expectType<Emits>(emits)
+    expectType<Slots>(slots)
   })
 })
 
@@ -481,4 +505,18 @@ describe('SetupContext', () => {
 
     expectAssignable<SetupContext<{ b: () => true }>>(wider)
   })
+
+  describe('short emits', () => {
+    const {
+      emit
+    }: SetupContext<{
+      a: [val: string]
+      b: [val: number]
+    }> = {} as any
+
+    expectType<{
+      (event: 'a', val: string): void
+      (event: 'b', val: number): void
+    }>(emit)
+  })
 })

packages/runtime-core/src/component.ts

@@ -50,7 +50,8 @@ import {
   ObjectEmitsOptions,
   EmitFn,
   emit,
-  normalizeEmitsOptions
+  normalizeEmitsOptions,
+  ShortEmitsToObject
 } from './componentEmits'
 import {
   EMPTY_OBJ,
@@ -126,16 +127,19 @@ export interface ComponentInternalOptions {
 
 export interface FunctionalComponent<
   P = {},
-  E extends EmitsOptions = {},
+  E extends EmitsOptions | Record<string, any[]> = {},
   S extends Record<string, any> = any
 > extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
   (
     props: P,
-    ctx: Omit<SetupContext<E, IfAny<S, {}, SlotsType<S>>>, 'expose'>
+    ctx: Omit<
+      SetupContext<ShortEmitsToObject<E>, IfAny<S, {}, SlotsType<S>>>,
+      'expose'
+    >
   ): any
   props?: ComponentPropsOptions<P>
-  emits?: E | (keyof E)[]
+  emits?: ShortEmitsToObject<E> | (keyof ShortEmitsToObject<E>)[]
   slots?: IfAny<S, Slots, SlotsType<S>>
   inheritAttrs?: boolean
   displayName?: string
@@ -158,10 +162,12 @@ export type ConcreteComponent<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any
 > =
   | ComponentOptions<Props, RawBindings, D, C, M>
-  | FunctionalComponent<Props, any>
+  | FunctionalComponent<Props, E, S>
 
 /**
  * A type used in public APIs where a component type is expected.
@@ -172,9 +178,11 @@ export type Component<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any
 > =
-  | ConcreteComponent<Props, RawBindings, D, C, M>
+  | ConcreteComponent<Props, RawBindings, D, C, M, E, S>
   | ComponentPublicInstanceConstructor<Props>
 
 export type { ComponentOptions }

packages/runtime-core/src/componentEmits.ts

@@ -55,6 +55,12 @@ export type EmitsToProps<T extends EmitsOptions> = T extends string[]
     }
   : {}
 
+export type ShortEmitsToObject<E> = E extends Record<string, any[]>
+  ? {
+      [K in keyof E]: (...args: E[K]) => any
+    }
+  : E
+
 export type EmitFn<
   Options = ObjectEmitsOptions,
   Event extends keyof Options = keyof Options
@@ -66,6 +72,8 @@ export type EmitFn<
       {
         [key in Event]: Options[key] extends (...args: infer Args) => any
           ? (event: key, ...args: Args) => void
+          : Options[key] extends any[]
+          ? (event: key, ...args: Options[key]) => void
           : (event: key, ...args: any[]) => void
       }[Event]
     >