Unlike using JavaScript, writing Vue programs in Typescript requires an understanding of Vue-related types, most of which are written in the @vue/runtime-core package.

Component

A Vue page is composed of a component, and the component’s class in Vue is Component, which inherits from ComponentOptions, FunctionalComponent and ComponentPublicInstanceConstructor.

Of these, ComponentOptions inherits from ComponentOptionsBase, which is the declarative options component we often write that contains properties such as data, methods, etc.

FunctionalComponent is a functional component, and ComponentPublicInstanceConstructor is an instance constructor.

ComponentOptions inherits from ComponentCustomOptions, an interface that is empty in the Vue source code, with which we can customize the properties in the Vue component options, as in the example in the source code.

1
2
3
4
5
6
7
8
9

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

The defineComponent function that we use when defining components is used to help us with the type declaration of component options, and it accepts ComponentOptionsWithoutProps, ComponentOptionsWithArrayProps or ComponentOptionsWithObjectProps as option parameters. They all inherit from ComponentOptionsBase, but have different forms of declaring props. This function can also accept the setup function.

The defineComponent function returns the DefineComponent class object, which is the intersection class object of ComponentOptionsBase and ComponentPublicInstanceConstructor.

1

type DefineComponent = ComponentPublicInstanceConstructor & ComponentOptionsBase &&

CreateAppFunction

In V3, the launch of a page usually starts with createApp, which has the following type declaration.

1
2
3
4

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

It accepts a Component and property as parameters and returns an App.

App

The App instance is a Vue top-level object through which you can set shared properties, set plugins, register components, set compilation options, set error handling functions, etc.

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

ComponentPublicInstance

ComponentPublicInstance is a component instance containing properties such as $el, emit, props, etc. Vue uses Component as a template and creates ComponentPublicInstance.

Its type is defined as

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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

where $options is the intersection of the ComponentOptionsBase class object (containing a renderer method for functional components, if any) and the MergedComponentOptionsOverride (hook function) class when we write the component.

P, ShallowUnwrapRef, UnwrapNestedRefs, ExtractComputedReturns, M help us to read the data properties of the component instance with this[…] to read the data properties and methods of the component instance.

ComponentCustomProperties is an empty interface in the source code that allows us to customize the properties on the component instance. Example.

1
2
3
4
5
6
7

import { Router } from 'vue-router'

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

The $ property is a ComponentInternalInstance class object that represents an internal example of the component and contains some properties for advanced applications, including VNode.