Vue3核心Typescript类解析

￡神魔★判官ぃ 2022-09-11 08:30 478阅读 0赞

![2823b7ee7b764abffb093d1cb99bd87a.png][]

与使用JavaScript不同的是，用Typescript写vue程序要需要了解vue的相关类型。Vue核心的类型，大部分写在@vue/runtime-core包中。

# **Component** #

Vue页面是由一个个组件组成的，组件在Vue中的类是Component，继承了ComponentOptions、FunctionalComponent和ComponentPublicInstanceconstructor。

其中，ComponentOptions继承了ComponentOptionsBase，就是是我们经常写的声明式的包含data、methods等属性的选项组件：

FunctionalComponent是函数式组件，ComponentPublicInstanceconstructor是实例构造器（构造函数）。

ComponentOptions继承了ComponentCustomOptions，这个接口在Vue源码中是空的，我们可以借助它了自定义Vue组件选项中的属性，比如源码中的例子：

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

我们在定义组件时使用的defineComponent函数用于帮助我们进行组件选项的类型声明，它接受ComponentOptionsWithoutProps，ComponentOptionsWithArrayProps或ComponentOptionsWithObjectProps作为选项参数。

它们都继承了ComponentOptionsBase，但具有不同的声明props的形式。这个函数也可以接受setup函数。

defineComponent函数返回DefineComponent类对象，它是ComponentOptionsBase和ComponentPublicInstanceConstructor的交集类对象：

type DefineComponent = ComponentPublicInstanceConstructor & ComponentOptionsBase &&

# **CreateAppFunction** #

在V3中，一个页面的启动通常是从createApp开始的，它的类型声明是这样的：

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

它接受一个Component和属性作为参数，返回一个App。

# **App** #

App实例是一个Vue的顶层对象，通过它可以设置共享属性、设置插件、注册组件、设置编译选项、设置错误处理函数等。

> https://v3.cn.vuejs.org/api/application-api.html

通过mount方法可以将根组件挂载到文档中，并返回一个ComponentPublicInstance对象。

# **ComponentPublicInstance** #

ComponentPublicInstance是组件实例，包含$el，'emit‘‘emit‘‘props等属性。Vue以Component为模板，创建了ComponentPublicInstance\`。

它的类型定义为：

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  $watch(    source: string | Function,    cb: Function,    options?: WatchOptions  ): WatchStopHandle} & P &  ShallowUnwrapRef<B> &  UnwrapNestedRefs<D> &  ExtractComputedReturns<C> &  M &  ComponentCustomProperties

其中$options就是我们在写组件时的ComponentOptionsBase类对象（如果有的话，对于函数式组件则包含一个renderer方法）和MergedComponentOptionsOverride（钩子函数）交集类。

P、ShallowUnwrapRef、UnwrapNestedRefs、ExtractComputedReturns、M帮助我们可以用this\[...\]的方式读取组件实例的数据属性和方法。

ComponentCustomProperties在源码中是一个空接口，我们可以通过它来自定义组件实例上的属性。示例：

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

$属性是ComponentInternalInstance类对象，表示组件的内部示例，包含了一些为高级应用提供的属性，包括VNode。

#  #

**学习更多技能**

**请点击下方公众号**

![09ef1b8479e5e3940f5b62496ab5e6c7.gif][]

![c8cb1fee92b2ccc1dfb1ee3ab4c49e12.png][]

![08cf3535443c84355d56c112fa9fd543.png][]

[2823b7ee7b764abffb093d1cb99bd87a.png]: /images/20220828/0a5a8dd9cc9b49fcbfa7861363e3b69c.png
[09ef1b8479e5e3940f5b62496ab5e6c7.gif]: /images/20220828/e0aad97fd2144bb799937e7e66d67412.png
[c8cb1fee92b2ccc1dfb1ee3ab4c49e12.png]: /images/20220828/04195b3967414d0f9b6b077050be1b52.png
[08cf3535443c84355d56c112fa9fd543.png]: /images/20220828/63a6ae9754ec4fb4b3c0f6957dcc3fcd.png