From f8de4ca9d458a03378e848b1e62d6507f7124871 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 8 Jul 2022 15:39:16 +0800 Subject: [PATCH] fix(types): fix missing instance properties on defineComponent this ref https://github.com/vuejs/vue/issues/12628#issuecomment-1177258223 --- types/test/v3/define-component-test.tsx | 5 ++ types/v3-component-public-instance.d.ts | 66 +++++++++++++------------ types/vue.d.ts | 22 +++++---- 3 files changed, 51 insertions(+), 42 deletions(-) diff --git a/types/test/v3/define-component-test.tsx b/types/test/v3/define-component-test.tsx index 9c9a25bea80..b982a805787 100644 --- 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 index 585f66de37a..6c2770f8cf9 100644 --- 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 & Omit

- : P & PublicProps - > - $attrs: Data - $refs: Data - $slots: Record - $scopedSlots: Slots - $root: ComponentPublicInstance | null - $parent: ComponentPublicInstance | null - $emit: EmitFn - $el: any - $options: Options & MergedComponentOptionsOverride - $forceUpdate: () => void - $nextTick: typeof nextTick - $watch( - source: string | Function, - cb: Function, - options?: WatchOptions - ): WatchStopHandle -} & Readonly

& +> = Vue3Instance< + D, + P, + PublicProps, + E, + Defaults, + MakeDefaultsOptional, + Options +> & + Readonly

& ShallowUnwrapRef & UnwrapNestedRefs & ExtractComputedReturns & M & ComponentCustomProperties +interface Vue3Instance< + D, + P, + PublicProps, + E, + Defaults, + MakeDefaultsOptional, + Options +> extends Vue2Instance { + $data: D + readonly $props: Readonly< + MakeDefaultsOptional extends true + ? Partial & Omit

+ : P & PublicProps + > + readonly $root: ComponentPublicInstance | null + readonly $parent: ComponentPublicInstance | null + readonly $emit: EmitFn + readonly $options: Options & MergedComponentOptionsOverride +} + type MergedHook void> = T | T[] export type MergedComponentOptionsOverride = { diff --git a/types/vue.d.ts b/types/vue.d.ts index 82cad69e793..ccc7702ace6 100644 --- 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 +export interface Vue extends Vue2Instance { + readonly $data: Record + readonly $props: Record readonly $parent: Vue readonly $root: Vue readonly $children: Vue[] + readonly $options: ComponentOptions + $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 - readonly $props: Record + readonly $ssrContext: any readonly $vnode: VNode readonly $attrs: Record @@ -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 + $nextTick: typeof nextTick $createElement: CreateElement }