Vue3核心Typescript類解析

與使用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``$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。