fix(types): fix missing instance properties on defineComponent this

ref #12628 (comment)
vuejs · Jul 8, 2022 · f8de4ca · f8de4ca
1 parent d3add06
commit f8de4ca
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 42 deletions.
diff --git a/types/test/v3/define-component-test.tsx b/types/test/v3/define-component-test.tsx
@@ -1139,9 +1139,14 @@ defineComponent({
   }
 })
 
+// Missing / mismatching Vue 2 properties
 // https://github.com/vuejs/vue/issues/12628#issuecomment-1177258223
 defineComponent({
   render(h) {
+    this.$listeners
+    this.$on('foo', () => {})
+    this.$ssrContext
+    this.$isServer
     return h('div', {}, [...this.$slots.default!])
   }
 })
diff --git a/types/v3-component-public-instance.d.ts b/types/v3-component-public-instance.d.ts
@@ -1,15 +1,11 @@
-import { ExtractDefaultPropTypes, ExtractPropTypes } from './v3-component-props'
 import {
   DebuggerEvent,
-  nextTick,
   ShallowUnwrapRef,
-  UnwrapNestedRefs,
-  WatchOptions,
-  WatchStopHandle
+  UnwrapNestedRefs
 } from './v3-generated'
-import { Data, UnionToIntersection } from './common'
+import { UnionToIntersection } from './common'
 
-import { VueConstructor } from './vue'
+import { Vue, Vue2Instance, VueConstructor } from './vue'
 import {
   ComputedOptions,
   MethodOptions,
@@ -153,37 +149,43 @@ export type ComponentPublicInstance<
     any,
     any
   >
-> = {
-  // $: ComponentInternalInstance
-  $data: D
-  $props: Readonly<
-    MakeDefaultsOptional extends true
-      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
-      : P & PublicProps
-  >
-  $attrs: Data
-  $refs: Data
-  $slots: Record<string, VNode[] | undefined>
-  $scopedSlots: Slots
-  $root: ComponentPublicInstance | null
-  $parent: ComponentPublicInstance | null
-  $emit: EmitFn<E>
-  $el: any
-  $options: Options & MergedComponentOptionsOverride
-  $forceUpdate: () => void
-  $nextTick: typeof nextTick
-  $watch(
-    source: string | Function,
-    cb: Function,
-    options?: WatchOptions
-  ): WatchStopHandle
-} & Readonly<P> &
+> = Vue3Instance<
+  D,
+  P,
+  PublicProps,
+  E,
+  Defaults,
+  MakeDefaultsOptional,
+  Options
+> &
+  Readonly<P> &
   ShallowUnwrapRef<B> &
   UnwrapNestedRefs<D> &
   ExtractComputedReturns<C> &
   M &
   ComponentCustomProperties
 
+interface Vue3Instance<
+  D,
+  P,
+  PublicProps,
+  E,
+  Defaults,
+  MakeDefaultsOptional,
+  Options
+> extends Vue2Instance {
+  $data: D
+  readonly $props: Readonly<
+    MakeDefaultsOptional extends true
+      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
+      : P & PublicProps
+  >
+  readonly $root: ComponentPublicInstance | null
+  readonly $parent: ComponentPublicInstance | null
+  readonly $emit: EmitFn<E>
+  readonly $options: Options & MergedComponentOptionsOverride
+}
+
 type MergedHook<T = () => void> = T | T[]
 
 export type MergedComponentOptionsOverride = {

diff --git a/types/vue.d.ts b/types/vue.d.ts
@@ -3,8 +3,6 @@ import {
   AsyncComponent,
   ComponentOptions,
   FunctionalComponentOptions,
-  WatchOptionsWithHandler,
-  WatchHandler,
   DirectiveOptions,
   DirectiveFunction,
   RecordPropsDefinition,
@@ -15,6 +13,7 @@ import {
 import { VNode, VNodeData, VNodeChildren, NormalizedScopedSlot } from './vnode'
 import { PluginFunction, PluginObject } from './plugin'
 import { DefineComponent } from './v3-define-component'
+import { nextTick } from './v3-generated'
 
 export interface CreateElement {
   (
@@ -36,20 +35,25 @@ export interface CreateElement {
   ): VNode
 }
 
-export interface Vue {
-  readonly $el: Element
-  readonly $options: ComponentOptions<Vue>
+export interface Vue extends Vue2Instance {
+  readonly $data: Record<string, any>
+  readonly $props: Record<string, any>
   readonly $parent: Vue
   readonly $root: Vue
   readonly $children: Vue[]
+  readonly $options: ComponentOptions<Vue>
+  $emit(event: string, ...args: any[]): this
+}
+
+export interface Vue2Instance {
+  readonly $el: Element
   readonly $refs: {
     [key: string]: Vue | Element | (Vue | Element)[] | undefined
   }
   readonly $slots: { [key: string]: VNode[] | undefined }
   readonly $scopedSlots: { [key: string]: NormalizedScopedSlot | undefined }
   readonly $isServer: boolean
-  readonly $data: Record<string, any>
-  readonly $props: Record<string, any>
+
   readonly $ssrContext: any
   readonly $vnode: VNode
   readonly $attrs: Record<string, string>
@@ -73,9 +77,7 @@ export interface Vue {
   $on(event: string | string[], callback: Function): this
   $once(event: string | string[], callback: Function): this
   $off(event?: string | string[], callback?: Function): this
-  $emit(event: string, ...args: any[]): this
-  $nextTick(callback: (this: this) => void): void
-  $nextTick(): Promise<void>
+  $nextTick: typeof nextTick
   $createElement: CreateElement
 }