與使用JavaScript不同的是，用Typescript寫vue程序要需要了解vue的相關(guān)類型。Vue核心的類型，大部分寫在@vue/runtime-core包中。

Component

Vue頁面是由一個個組件組成的，組件在Vue中的類是Component，繼承了ComponentOptions、FunctionalComponent和ComponentPublicInstanceconstructor。

其中，ComponentOptions繼承了ComponentOptionsBase，就是是我們經(jīng)常寫的聲明式的包含data、methods等屬性的選項組件：

FunctionalComponent是函數(shù)式組件，ComponentPublicInstanceconstructor是實例構(gòu)造器（構(gòu)造函數(shù)）。

ComponentOptions繼承了ComponentCustomOptions，這個接口在Vue源碼中是空的，我們可以借助它了自定義Vue組件選項中的屬性，比如源碼中的例子：

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

我們在定義組件時使用的defineComponent函數(shù)用于幫助我們進行組件選項的類型聲明，它接受ComponentOptionsWithoutProps，ComponentOptionsWithArrayProps或ComponentOptionsWithObjectProps作為選項參數(shù)。

它們都繼承了ComponentOptionsBase，但具有不同的聲明props的形式。這個函數(shù)也可以接受setup函數(shù)。

defineComponent函數(shù)返回DefineComponent類對象，它是ComponentOptionsBase和ComponentPublicInstanceConstructor的交集類對象：

type DefineComponent = ComponentPublicInstanceConstructor & ComponentOptionsBase &&

CreateAppFunction

在V3中，一個頁面的啟動通常是從createApp開始的，它的類型聲明是這樣的：

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

它接受一個Component和屬性作為參數(shù)，返回一個App。

App

App實例是一個Vue的頂層對象，通過它可以設置共享屬性、設置插件、注冊組件、設置編譯選項、設置錯誤處理函數(shù)等。

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

通過mount方法可以將根組件掛載到文檔中，并返回一個ComponentPublicInstance對象。

ComponentPublicInstance

ComponentPublicInstance是組件實例，包含$el，'emit‘‘emit‘‘props等屬性。Vue以Component為模板，創(chuàng)建了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類對象（如果有的話，對于函數(shù)式組件則包含一個renderer方法）和MergedComponentOptionsOverride（鉤子函數(shù)）交集類。

P、ShallowUnwrapRef、UnwrapNestedRefs、ExtractComputedReturns、M幫助我們可以用this[...]的方式讀取組件實例的數(shù)據(jù)屬性和方法。

ComponentCustomProperties在源碼中是一個空接口，我們可以通過它來自定義組件實例上的屬性。示例：

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

$屬性是ComponentInternalInstance類對象，表示組件的內(nèi)部示例，包含了一些為高級應用提供的屬性，包括VNode。

學習更多技能

請點擊下方公眾號