Skip to content

Commit

Permalink
fix(types): support Vue interface augmentations in defineComponent
Browse files Browse the repository at this point in the history
fix #12642
  • Loading branch information
yyx990803 committed Jul 13, 2022
1 parent 08fb4a2 commit 005e52d
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 25 deletions.
9 changes: 8 additions & 1 deletion types/test/augmentation-test.ts
@@ -1,4 +1,4 @@
import Vue from '../index'
import Vue, { defineComponent } from '../index'

declare module '../vue' {
// add instance property and method
Expand Down Expand Up @@ -44,3 +44,10 @@ vm.$instanceMethod()

Vue.staticProperty
Vue.staticMethod()

defineComponent({
mounted() {
this.$instanceMethod
this.$instanceProperty
}
})
1 change: 1 addition & 0 deletions types/test/v3/define-component-test.tsx
Expand Up @@ -1143,6 +1143,7 @@ defineComponent({
// https://github.com/vuejs/vue/issues/12628#issuecomment-1177258223
defineComponent({
render(h) {
// vue 2
this.$listeners
this.$on('foo', () => {})
this.$ssrContext
Expand Down
30 changes: 15 additions & 15 deletions types/v3-component-public-instance.d.ts
Expand Up @@ -5,16 +5,15 @@ import {
} from './v3-generated'
import { UnionToIntersection } from './common'

import { Vue, Vue2Instance, VueConstructor } from './vue'
import { Vue, VueConstructor } from './vue'
import {
ComputedOptions,
MethodOptions,
ExtractComputedReturns,
ComponentOptionsMixin,
ComponentOptionsBase
} from './v3-component-options'
import { EmitFn, EmitsOptions, Slots } from './v3-setup-context'
import { VNode } from './vnode'
import { EmitFn, EmitsOptions } from './v3-setup-context'

/**
* Custom properties added to component instances in any way and can be accessed through `this`
Expand Down Expand Up @@ -173,18 +172,19 @@ interface Vue3Instance<
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
}
> extends Vue<
D,
Readonly<
MakeDefaultsOptional extends true
? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
: P & PublicProps
>,
ComponentPublicInstance | null,
ComponentPublicInstance,
ComponentPublicInstance[],
Options & MergedComponentOptionsOverride,
EmitFn<E>
> {}

type MergedHook<T = () => void> = T | T[]

Expand Down
26 changes: 17 additions & 9 deletions types/vue.d.ts
Expand Up @@ -35,17 +35,25 @@ export interface CreateElement {
): VNode
}

export interface Vue extends Vue2Instance {
readonly $data: Record<string, any>
readonly $props: Record<string, any>
readonly $parent: Vue
readonly $root: Vue
readonly $children: Vue[]
export interface Vue<
Data = Record<string, any>,
Props = Record<string, any>,
Parent = never,
Root = never,
Children = never,
Options = never,
Emit = (event: string, ...args: any[]) => Vue
> {
// properties with different types in defineComponent()
readonly $data: Data
readonly $props: Props
readonly $parent: Parent extends never ? Vue : Parent
readonly $root: Root extends never ? Vue : Root
readonly $children: Children extends never ? Vue[] : Children
readonly $options: ComponentOptions<Vue>
$emit(event: string, ...args: any[]): this
}
$emit: Emit

export interface Vue2Instance {
// Vue 2 only or shared
readonly $el: Element
readonly $refs: {
[key: string]: Vue | Element | (Vue | Element)[] | undefined
Expand Down

0 comments on commit 005e52d

Please sign in to comment.