Vue3 core typescript class parsing

Qinglingzi 2021-09-15 09:45:04

And use JavaScript The difference is , use Typescript Write Vue The program needs to know Vue Related types of .Vue Type of core , Most of them are written in @vue/runtime-core In bag .


Vue A page is made up of components , Component in Vue The class in is Component, Inherited ComponentOptionsFunctionalComponent and ComponentPublicInstanceConstructor.

among ,ComponentOptions Inherited ComponentOptionsBase, It is the declarative inclusion we often write datamethods And so on :

FunctionalComponent Is a functional component ,ComponentPublicInstanceConstructor It's an instance builder ( Constructors ).

ComponentOptions Inherited ComponentCustomOptions, This interface is in Vue The source code is empty , We can use it to customize Vue Properties in component options , For example, the example in the source code :

declare module '@vue/runtime-core' {
interface ComponentCustomOptions {
to: Route,
from: Route,
next: () => void
): void
 Copy code 

What we use when defining components defineComponent Function is used to help us declare the type of component options , It accepts ComponentOptionsWithoutProps,ComponentOptionsWithArrayProps or ComponentOptionsWithObjectProps As an option parameter . They all inherit ComponentOptionsBase, But with different declarations props In the form of . This function can also accept setup function .

defineComponent The function returns DefineComponent Class object , It is ComponentOptionsBase and ComponentPublicInstanceConstructor Intersection class object :

type DefineComponent = ComponentPublicInstanceConstructor & ComponentOptionsBase &&
 Copy code 


stay V3 in , A page is usually launched from createApp At the beginning , Its type declaration is like this :

export type CreateAppFunction<HostElement> = ( rootComponent: Component, rootProps?: Data | null ) => App<HostElement>
 Copy code 

It accepts a Component And properties as parameters , Return to one App.


App The example is a Vue The top object of , It allows you to set shared properties 、 Set up the plugin 、 Certified components 、 Set compilation options 、 Set error handling functions, etc .…

adopt mount Method can mount the root component into the document , And return a ComponentPublicInstance object .


ComponentPublicInstance Is a component instance , contain $el,' e m i t emit`` props Equal attribute .Vue With Component As a template , Created ComponentPublicInstance`.

Its type is defined as :

type ComponentPublicInstance<
P = {}, // props type extracted from props option
B = {}, // raw bindings returned from setup()
D = {}, // return from data()
C extends ComputedOptions = {},
M extends MethodOptions = {},
E extends EmitsOptions = {},
PublicProps = P,
Defaults = {},
MakeDefaultsOptional extends boolean = false,
Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>
> = {
$: ComponentInternalInstance
$data: D
$props: MakeDefaultsOptional extends true
? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
: P & PublicProps
$attrs: Data
$refs: Data
$slots: Slots
$root: ComponentPublicInstance | null
$parent: ComponentPublicInstance | null
$emit: EmitFn<E>
$el: any
$options: Options & MergedComponentOptionsOverride
$forceUpdate: () => void
$nextTick: typeof nextTick
source: string | Function,
cb: Function,
options?: WatchOptions
): WatchStopHandle
} & P &
ShallowUnwrapRef<B> &
UnwrapNestedRefs<D> &
ExtractComputedReturns<C> &
M &
 Copy code 

among $options That's what we do when we write components ComponentOptionsBase Class object ( If any , For functional components, there is a renderer Method ) and MergedComponentOptionsOverride( Hook function ) Intersection class .

PShallowUnwrapRefUnwrapNestedRefsExtractComputedReturnsM Help us with this[...] Read the data properties and methods of the component instance .

ComponentCustomProperties In the source code, it is an empty interface , We can use it to customize the properties on the component instance . Example :

import { Router } from 'vue-router'
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$router: Router
 Copy code 

$ The attribute is ComponentInternalInstance Class object , Represents an internal example of a component , Contains some properties for advanced applications , Include VNode.

Please bring the original link to reprint ,thank
Similar articles