Unlike JavaScript, writing Vue programs in Typescript requires an understanding of Vue types. The type of Vue core, most of which is written in the @vue/ Run-time core package.

Component

Vue page is made up of each Component, the Component class is a Component in the Vue inherited ComponentOptions, FunctionalComponent and ComponentPublicInstanceConstructor.

ComponentOptions inherits ComponentOptionsBase, which is a declarative component containing data, methods and other attributes:

FunctionalComponent is a functional component, ComponentPublicInstanceConstructor is the instance constructor (a constructor).

ComponentOptions inherits ComponentCustomOptions, this interface is null in the Vue source code, we can use it to customize the Vue ComponentOptions properties, such as the source code example:

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

When we define components using defineComponent function is used to help us for component option type declaration, it accepts ComponentOptionsWithoutProps, ComponentOptionsWithArrayProps or ComponentOptionsWithObjectProps as options parameter. They both inherit ComponentOptionsBase, but have a different declaration props form. This function can also accept the setup function.

DefineComponent function returns defineComponent class object, it is at the intersection between ComponentPublicInstanceConstructor and ComponentOptionsBase class objects:

type DefineComponent = ComponentPublicInstanceConstructor & ComponentOptionsBase && 
Copy the code

CreateAppFunction

In V3, a page usually starts with createApp, with a type declaration like this:

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

It takes a Component and a property as arguments and returns an App.

App

The App instance is a top-level object of the Vue through which you can set shared properties, set plug-ins, register components, set compilation options, set error handlers, and so on.

V3.cn.vuejs.org/api/applica…

The mount method mounts the root component to the document and returns a ComponentPublicInstance object.

ComponentPublicInstance

ComponentPublicInstance is a component instance that contains properties like $EL, ’emit’, ’emit’, ’emit’, ‘props’, etc. Vue creates ComponentPublicInstance from the Component template.

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

Among these is $options when we write a component of ComponentOptionsBase class object (if there were, for functional component contains a renderer method) and MergedComponentOptionsOverride function (hook) overlap between classes.

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

ComponentCustomProperties is an empty interface in the source code, through which we can customize the component instance attributes. Example:

import { Router } from 'vue-router'

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

$attributes are ComponentInternalInstance class objects, internal sample presentation components, contains some properties for advanced application, including the VNode.