feat(types): mixins/extends support in TypeScript (#626)

2020-06-09 22:37:00 +08:00
parent 97dedebd80
commit d3c436ae2e
11 changed files with 656 additions and 56 deletions
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -4,10 +4,14 @@ import {
  ComponentOptionsWithoutProps,
  ComponentOptionsWithArrayProps,
  ComponentOptionsWithObjectProps,
+  ComponentOptionsMixin,
  RenderFunction
 } from './componentOptions'
 import { SetupContext, FunctionalComponent } from './component'
-import { ComponentPublicInstance } from './componentProxy'
+import {
+  CreateComponentPublicInstance,
+  ComponentPublicInstanceConstructor
+} from './componentProxy'
 import { ExtractPropTypes, ComponentPropsOptions } from './componentProps'
 import { EmitsOptions } from './componentEmits'
 import { isFunction } from '@vue/shared'
@@ -25,17 +29,21 @@ export function defineComponent<Props, RawBindings = object>(
    props: Readonly<Props>,
    ctx: SetupContext
  ) => RawBindings | RenderFunction
-): {
-  new (): ComponentPublicInstance<
+): ComponentPublicInstanceConstructor<
+  CreateComponentPublicInstance<
    Props,
    RawBindings,
    {},
    {},
    {},
+    {},
+    {},
+    {},
    // public props
    VNodeProps & Props
  >
-} & FunctionalComponent<Props>
+> &
+  FunctionalComponent<Props>

 // overload 2: object format with no props
 // (uses user defined props interface)
@@ -46,21 +54,46 @@ export function defineComponent<
  D = {},
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
  E extends EmitsOptions = Record<string, any>,
  EE extends string = string
 >(
-  options: ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, E, EE>
-): {
-  new (): ComponentPublicInstance<
+  options: ComponentOptionsWithoutProps<
    Props,
    RawBindings,
    D,
    C,
    M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >
+): ComponentPublicInstanceConstructor<
+  CreateComponentPublicInstance<
+    Props,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
    E,
    VNodeProps & Props
  >
-} & ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, E, EE>
+> &
+  ComponentOptionsWithoutProps<
+    Props,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >

 // overload 3: object format with array props declaration
 // props inferred as { [key in PropNames]?: any }
@@ -71,6 +104,8 @@ export function defineComponent<
  D,
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
  E extends EmitsOptions = Record<string, any>,
  EE extends string = string
 >(
@@ -80,13 +115,36 @@ export function defineComponent<
    D,
    C,
    M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >
+): ComponentPublicInstanceConstructor<
+  // array props technically doesn't place any contraints on props in TSX before,
+  // but now we can export array props in TSX
+  CreateComponentPublicInstance<
+    Readonly<{ [key in PropNames]?: any }>,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E
+  >
+> &
+  ComponentOptionsWithArrayProps<
+    PropNames,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
    E,
    EE
  >
-): {
-  // array props technically doesn't place any constraints on props in TSX
-  new (): ComponentPublicInstance<VNodeProps, RawBindings, D, C, M, E>
-} & ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M, E, EE>

 // overload 4: object format with object props declaration
 // see `ExtractPropTypes` in ./componentProps.ts
@@ -98,6 +156,8 @@ export function defineComponent<
  D,
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
  E extends EmitsOptions = Record<string, any>,
  EE extends string = string
 >(
@@ -107,20 +167,35 @@ export function defineComponent<
    D,
    C,
    M,
+    Mixin,
+    Extends,
    E,
    EE
  >
-): {
-  new (): ComponentPublicInstance<
+): ComponentPublicInstanceConstructor<
+  CreateComponentPublicInstance<
    ExtractPropTypes<PropsOptions>,
    RawBindings,
    D,
    C,
    M,
+    Mixin,
+    Extends,
    E,
    VNodeProps & ExtractPropTypes<PropsOptions, false>
  >
-} & ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, EE>
+> &
+  ComponentOptionsWithObjectProps<
+    PropsOptions,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E,
+    EE
+  >

 // implementation, close to no-op
 export function defineComponent(options: unknown) {
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -7,6 +7,7 @@ import {
  shallowReadonly
 } from '@vue/reactivity'
 import {
+  CreateComponentPublicInstance,
  ComponentPublicInstance,
  PublicInstanceProxyHandlers,
  RuntimeCompiledPublicInstanceProxyHandlers,
@@ -96,7 +97,15 @@ export type Component = ComponentOptions | FunctionalComponent<any>
 // The constructor type is an artificial type returned by defineComponent().
 export type PublicAPIComponent =
  | Component
-  | { new (...args: any[]): ComponentPublicInstance<any, any, any, any, any> }
+  | {
+      new (...args: any[]): CreateComponentPublicInstance<
+        any,
+        any,
+        any,
+        any,
+        any
+      >
+    }

 export { ComponentOptions }

--- a/packages/runtime-core/src/componentEmits.ts
+++ b/packages/runtime-core/src/componentEmits.ts
@@ -12,6 +12,7 @@ import { ComponentInternalInstance } from './component'
 import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
 import { warn } from './warning'
 import { normalizePropsOptions } from './componentProps'
+import { UnionToIntersection } from './helpers/typeUtils'

 export type ObjectEmitsOptions = Record<
  string,
@@ -19,12 +20,6 @@ export type ObjectEmitsOptions = Record<
 >
 export type EmitsOptions = ObjectEmitsOptions | string[]

-type UnionToIntersection<U> = (U extends any
-  ? (k: U) => void
-  : never) extends ((k: infer I) => void)
-  ? I
-  : never
-
 export type EmitFn<
  Options = ObjectEmitsOptions,
  Event extends keyof Options = keyof Options
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -48,7 +48,10 @@ import {
 } from './componentProps'
 import { EmitsOptions } from './componentEmits'
 import { Directive } from './directives'
-import { ComponentPublicInstance } from './componentProxy'
+import {
+  CreateComponentPublicInstance,
+  ComponentPublicInstance
+} from './componentProxy'
 import { warn } from './warning'
 import { VNodeChild } from './vnode'

@@ -78,10 +81,12 @@ export interface ComponentOptionsBase<
  D,
  C extends ComputedOptions,
  M extends MethodOptions,
+  Mixin extends ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin,
  E extends EmitsOptions,
  EE extends string = string
 >
-  extends LegacyOptions<Props, D, C, M>,
+  extends LegacyOptions<Props, D, C, M, Mixin, Extends>,
    SFCInternalOptions,
    ComponentCustomOptions {
  setup?: (
@@ -148,12 +153,24 @@ export type ComponentOptionsWithoutProps<
  D = {},
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
  E extends EmitsOptions = EmitsOptions,
  EE extends string = string
-> = ComponentOptionsBase<Props, RawBindings, D, C, M, E, EE> & {
+> = ComponentOptionsBase<Props, RawBindings, D, C, M, Mixin, Extends, E, EE> & {
  props?: undefined
 } & ThisType<
-    ComponentPublicInstance<{}, RawBindings, D, C, M, E, Readonly<Props>>
+    CreateComponentPublicInstance<
+      {},
+      RawBindings,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      E,
+      Readonly<Props>
+    >
  >

 export type ComponentOptionsWithArrayProps<
@@ -162,12 +179,25 @@ export type ComponentOptionsWithArrayProps<
  D = {},
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
  E extends EmitsOptions = EmitsOptions,
  EE extends string = string,
  Props = Readonly<{ [key in PropNames]?: any }>
-> = ComponentOptionsBase<Props, RawBindings, D, C, M, E, EE> & {
+> = ComponentOptionsBase<Props, RawBindings, D, C, M, Mixin, Extends, E, EE> & {
  props: PropNames[]
-} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M, E>>
+} & ThisType<
+    CreateComponentPublicInstance<
+      Props,
+      RawBindings,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      E
+    >
+  >

 export type ComponentOptionsWithObjectProps<
  PropsOptions = ComponentObjectPropsOptions,
@@ -175,18 +205,43 @@ export type ComponentOptionsWithObjectProps<
  D = {},
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
  E extends EmitsOptions = EmitsOptions,
  EE extends string = string,
  Props = Readonly<ExtractPropTypes<PropsOptions>>
-> = ComponentOptionsBase<Props, RawBindings, D, C, M, E, EE> & {
+> = ComponentOptionsBase<Props, RawBindings, D, C, M, Mixin, Extends, E, EE> & {
  props: PropsOptions
-} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M, E>>
+} & ThisType<
+    CreateComponentPublicInstance<
+      Props,
+      RawBindings,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      E
+    >
+  >

 export type ComponentOptions =
  | ComponentOptionsWithoutProps<any, any, any, any, any>
  | ComponentOptionsWithObjectProps<any, any, any, any, any>
  | ComponentOptionsWithArrayProps<any, any, any, any, any>

+export type ComponentOptionsMixin = ComponentOptionsBase<
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any
+>
+
 export type ComputedOptions = Record<
  string,
  ComputedGetter<any> | WritableComputedOptions<any>
@@ -222,7 +277,9 @@ interface LegacyOptions<
  Props,
  D,
  C extends ComputedOptions,
-  M extends MethodOptions
+  M extends MethodOptions,
+  Mixin extends ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin
 > {
  // allow any custom options
  [key: string]: any
@@ -232,8 +289,8 @@ interface LegacyOptions<
  // since that leads to some sort of circular inference and breaks ThisType
  // for the entire component.
  data?: (
-    this: ComponentPublicInstance<Props>,
-    vm: ComponentPublicInstance<Props>
+    this: CreateComponentPublicInstance<Props>,
+    vm: CreateComponentPublicInstance<Props>
  ) => D
  computed?: C
  methods?: M
@@ -242,8 +299,8 @@ interface LegacyOptions<
  inject?: ComponentInjectOptions

  // composition
-  mixins?: ComponentOptions[]
-  extends?: ComponentOptions
+  mixins?: Mixin[]
+  extends?: Extends

  // lifecycle
  beforeCreate?(): void
@@ -261,6 +318,22 @@ interface LegacyOptions<
  errorCaptured?: ErrorCapturedHook
 }

+export type OptionTypesKeys = 'P' | 'B' | 'D' | 'C' | 'M'
+
+export type OptionTypesType<
+  P = {},
+  B = {},
+  D = {},
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {}
+> = {
+  P: P
+  B: B
+  D: D
+  C: C
+  M: M
+}
+
 const enum OptionTypes {
  PROPS = 'Props',
  DATA = 'Data',
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -67,10 +67,12 @@ type OptionalKeys<T, MakeDefaultRequired> = Exclude<
 type InferPropType<T> = T extends null
  ? any // null & true would fail to infer
  : T extends { type: null | true }
-    ? any // somehow `ObjectConstructor` when inferred from { (): T } becomes `any`
+    ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
    : T extends ObjectConstructor | { type: ObjectConstructor }
      ? { [key: string]: any }
-      : T extends Prop<infer V> ? V : T
+      : T extends BooleanConstructor | { type: BooleanConstructor }
+        ? boolean
+        : T extends Prop<infer V> ? V : T

 export type ExtractPropTypes<
  O,
--- a/packages/runtime-core/src/componentProxy.ts
+++ b/packages/runtime-core/src/componentProxy.ts
@@ -14,6 +14,9 @@ import {
  ComponentOptionsBase,
  ComputedOptions,
  MethodOptions,
+  ComponentOptionsMixin,
+  OptionTypesType,
+  OptionTypesKeys,
  resolveMergedOptions
 } from './componentOptions'
 import { normalizePropsOptions } from './componentProps'
@@ -24,6 +27,7 @@ import {
  markAttrsAccessed
 } from './componentRenderUtils'
 import { warn } from './warning'
+import { UnionToIntersection } from './helpers/typeUtils'

 /**
 * Custom properties added to component instances in any way and can be accessed through `this`
@@ -52,6 +56,69 @@ import { warn } from './warning'
 */
 export interface ComponentCustomProperties {}

+type IsDefaultMixinComponent<T> = T extends ComponentOptionsMixin
+  ? ComponentOptionsMixin extends T ? true : false
+  : false
+
+type MixinToOptionTypes<T> = T extends ComponentOptionsBase<
+  infer P,
+  infer B,
+  infer D,
+  infer C,
+  infer M,
+  infer Mixin,
+  infer Extends,
+  any
+>
+  ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}> &
+      IntersectionMixin<Mixin> &
+      IntersectionMixin<Extends>
+  : never
+
+// ExtractMixin(map type) is used to resolve circularly references
+type ExtractMixin<T> = {
+  Mixin: MixinToOptionTypes<T>
+}[T extends ComponentOptionsMixin ? 'Mixin' : never]
+
+type IntersectionMixin<T> = IsDefaultMixinComponent<T> extends true
+  ? OptionTypesType<{}, {}, {}, {}, {}>
+  : UnionToIntersection<ExtractMixin<T>>
+
+type UnwrapMixinsType<
+  T,
+  Type extends OptionTypesKeys
+> = T extends OptionTypesType ? T[Type] : never
+
+type EnsureNonVoid<T> = T extends void ? {} : T
+
+export type CreateComponentPublicInstance<
+  P = {},
+  B = {},
+  D = {},
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  E extends EmitsOptions = {},
+  PublicProps = P,
+  PublicMixin = IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
+  PublicP = UnwrapMixinsType<PublicMixin, 'P'> & EnsureNonVoid<P>,
+  PublicB = UnwrapMixinsType<PublicMixin, 'B'> & EnsureNonVoid<B>,
+  PublicD = UnwrapMixinsType<PublicMixin, 'D'> & EnsureNonVoid<D>,
+  PublicC extends ComputedOptions = UnwrapMixinsType<PublicMixin, 'C'> &
+    EnsureNonVoid<C>,
+  PublicM extends MethodOptions = UnwrapMixinsType<PublicMixin, 'M'> &
+    EnsureNonVoid<M>
+> = ComponentPublicInstance<
+  PublicP,
+  PublicB,
+  PublicD,
+  PublicC,
+  PublicM,
+  E,
+  PublicProps,
+  ComponentOptionsBase<P, B, D, C, M, Mixin, Extends, E>
+>
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
 export type ComponentPublicInstance<
@@ -61,11 +128,12 @@ export type ComponentPublicInstance<
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
  E extends EmitsOptions = {},
-  PublicProps = P
+  PublicProps = P,
+  Options = ComponentOptionsBase<any, any, any, any, any, any, any, any>
 > = {
  $: ComponentInternalInstance
  $data: D
-  $props: PublicProps
+  $props: P & PublicProps
  $attrs: Data
  $refs: Data
  $slots: Slots
@@ -73,7 +141,7 @@ export type ComponentPublicInstance<
  $parent: ComponentPublicInstance | null
  $emit: EmitFn<E>
  $el: any
-  $options: ComponentOptionsBase<P, B, D, C, M, E>
+  $options: Options
  $forceUpdate: ReactiveEffect
  $nextTick: typeof nextTick
  $watch: typeof instanceWatch
@@ -84,6 +152,12 @@ export type ComponentPublicInstance<
  M &
  ComponentCustomProperties

+export type ComponentPublicInstanceConstructor<
+  T extends ComponentPublicInstance
+> = {
+  new (): T
+}
+
 const publicPropertiesMap: Record<
  string,
  (i: ComponentInternalInstance) => any
--- a/packages/runtime-core/src/helpers/typeUtils.ts
+++ b/packages/runtime-core/src/helpers/typeUtils.ts
@@ -0,0 +1,5 @@
+export type UnionToIntersection<U> = (U extends any
+  ? (k: U) => void
+  : never) extends ((k: infer I) => void)
+  ? I
+  : never