fix(type): improve defineComponent type for option apis

Author: antfu

src/component/common.ts

@@ -0,0 +1 @@
+export type Data = { [key: string]: unknown }

src/component/component.ts

@@ -0,0 +1,104 @@
+import { Data } from './common'
+import { ComponentPropsOptions, ExtractPropTypes } from './componentProps'
+import { VNode } from 'vue'
+import {
+  ComponentInstance,
+  VueProxy,
+  ComponentRenderProxy,
+} from './componentProxy'
+
+import { ComponentOptions as Vue2ComponentOptions } from 'vue'
+
+export interface SetupContext {
+  readonly attrs: Record<string, string>
+  readonly slots: { [key: string]: (...args: any[]) => VNode[] }
+  readonly parent: ComponentInstance | null
+  readonly root: ComponentInstance
+  readonly listeners: { [key: string]: Function }
+
+  emit(event: string, ...args: any[]): void
+}
+
+export type ComputedGetter<T> = (ctx?: any) => T
+export type ComputedSetter<T> = (v: T) => void
+
+export interface WritableComputedOptions<T> {
+  get: ComputedGetter<T>
+  set: ComputedSetter<T>
+}
+
+export type ComputedOptions = Record<
+  string,
+  ComputedGetter<any> | WritableComputedOptions<any>
+>
+
+export interface MethodOptions {
+  [key: string]: Function
+}
+
+export type SetupFunction<Props, RawBindings> = (
+  this: void,
+  props: Props,
+  ctx: SetupContext
+) => RawBindings | (() => VNode | null)
+
+interface ComponentOptionsBase<
+  Props,
+  D = Data,
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {}
+>
+  extends Omit<
+    Vue2ComponentOptions<Vue, D, M, C, Props>,
+    'data' | 'computed' | 'method' | 'setup' | 'props'
+  > {
+  data?: D | (() => D)
+  computed?: C
+  methods?: M
+}
+
+export type ExtractComputedReturns<T extends any> = {
+  [key in keyof T]: T[key] extends { get: (...args: any[]) => infer TReturn }
+    ? TReturn
+    : T[key] extends (...args: any[]) => infer TReturn
+    ? TReturn
+    : never
+}
+
+export type ComponentOptionsWithProps<
+  PropsOptions = ComponentPropsOptions,
+  RawBindings = Data,
+  D = Data,
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Props = ExtractPropTypes<PropsOptions>
+> = ComponentOptionsBase<Props, D, C, M> & {
+  props?: PropsOptions
+  setup?: SetupFunction<Props, RawBindings>
+} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M>>
+
+export type ComponentOptionsWithArrayProps<
+  PropNames extends string = string,
+  RawBindings = Data,
+  D = Data,
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Props = Readonly<{ [key in PropNames]?: any }>
+> = ComponentOptionsBase<Props, D, C, M> & {
+  props?: PropNames[]
+  setup?: SetupFunction<Props, RawBindings>
+} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M>>
+
+export type ComponentOptionsWithoutProps<
+  Props = unknown,
+  RawBindings = Data,
+  D = Data,
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {}
+> = ComponentOptionsBase<Props, D, C, M> & {
+  props?: undefined
+  setup?: SetupFunction<Props, RawBindings>
+} & ThisType<ComponentRenderProxy<Props, RawBindings, D, C, M>>
+
+export type WithLegacyAPI<T, D, C, M, Props> = T &
+  Omit<Vue2ComponentOptions<Vue, D, M, C, Props>, keyof T>

src/component/componentOptions.ts

@@ -1,4 +1,4 @@
-import { Data } from './component'
+import { Data } from './common'
 
 export type ComponentPropsOptions<P = Data> =
   | ComponentObjectPropsOptions<P>

src/component/componentProps.ts

@@ -0,0 +1,68 @@
+import { ExtractPropTypes } from './componentProps'
+import { UnwrapRef } from '..'
+import { Data } from './common'
+
+import Vue, {
+  VueConstructor,
+  ComponentOptions as Vue2ComponentOptions,
+} from 'vue'
+import {
+  ComputedOptions,
+  MethodOptions,
+  ExtractComputedReturns,
+} from './componentOptions'
+
+export type ComponentInstance = InstanceType<VueConstructor>
+
+// public properties exposed on the proxy, which is used as the render context
+// in templates (as `this` in the render option)
+export type ComponentRenderProxy<
+  P = {}, // props type extracted from props option
+  B = {}, // raw bindings returned from setup()
+  D = {}, // return from data()
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  PublicProps = P
+> = {
+  $data: D
+  $props: P & PublicProps
+  $attrs: Data
+  $refs: Data
+  $slots: Data
+  $root: ComponentInstance | null
+  $parent: ComponentInstance | null
+  $emit: (event: string, ...args: unknown[]) => void
+} & P &
+  UnwrapRef<B> &
+  D &
+  M &
+  ExtractComputedReturns<C>
+
+// for Vetur and TSX support
+type VueConstructorProxy<PropsOptions, RawBindings> = VueConstructor & {
+  new (...args: any[]): ComponentRenderProxy<
+    ExtractPropTypes<PropsOptions>,
+    UnwrapRef<RawBindings>,
+    ExtractPropTypes<PropsOptions, false>
+  >
+}
+
+type DefaultData<V> = object | ((this: V) => object)
+type DefaultMethods<V> = { [key: string]: (this: V, ...args: any[]) => any }
+type DefaultComputed = { [key: string]: any }
+
+export type VueProxy<
+  PropsOptions,
+  RawBindings,
+  Data = DefaultData<Vue>,
+  Methods = DefaultMethods<Vue>,
+  Computed = DefaultComputed
+> = Vue2ComponentOptions<
+  Vue,
+  UnwrapRef<RawBindings> & Data,
+  Methods,
+  Computed,
+  PropsOptions,
+  ExtractPropTypes<PropsOptions, false>
+> &
+  VueConstructorProxy<PropsOptions, RawBindings>

src/component/componentProxy.ts

@@ -0,0 +1,51 @@
+import { ComponentPropsOptions } from './componentProps'
+import {
+  MethodOptions,
+  ComputedOptions,
+  ComponentOptionsWithoutProps,
+  ComponentOptionsWithArrayProps,
+  ComponentOptionsWithProps,
+} from './componentOptions'
+import { VueProxy } from './componentProxy'
+import { Data } from './common'
+
+// overload 1: object format with no props
+export function defineComponent<
+  RawBindings,
+  D = Data,
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {}
+>(
+  options: ComponentOptionsWithoutProps<unknown, RawBindings, D, C, M>
+): VueProxy<unknown, 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
+export function defineComponent<
+  PropNames extends string,
+  RawBindings = Data,
+  D = Data,
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  PropsOptions extends ComponentPropsOptions = ComponentPropsOptions
+>(
+  options: ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M>
+): VueProxy<Readonly<{ [key in PropNames]?: any }>, RawBindings, D, C, M>
+
+// 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 = {},
+  PropsOptions extends ComponentPropsOptions = ComponentPropsOptions
+>(
+  options: ComponentOptionsWithProps<PropsOptions, RawBindings, D, C, M>
+): VueProxy<PropsOptions, RawBindings, D, C, M>
+// implementation, close to no-op
+export function defineComponent(options: any) {
+  return options as any
+}

src/component/defineComponent.ts

@@ -1,9 +1,5 @@
-export {
-  Data,
-  defineComponent,
-  SetupFunction,
-  SetupContext,
-  ComponentInstance,
-  ComponentRenderProxy,
-} from './component'
+export { defineComponent } from './defineComponent'
+export { SetupFunction, SetupContext } from './componentOptions'
+export { ComponentInstance, ComponentRenderProxy } from './componentProxy'
+export { Data } from './common'
 export { PropType, PropOptions } from './componentProps'