Different from using JavaScript, writing Vue programs in Typescript requires knowledge of Vue related types. Most of the Vue core types are written in the @vue/runtime-core package.

Component

The Vue page is composed of components. The classes of components in Vue are Componentinherited ComponentOptions, FunctionalComponentand ComponentPublicInstanceConstructor.

Among them, ComponentOptionsinherited ComponentOptionsBaseis the option component of declarative inclusion dataand methodsother attributes that we often write :

FunctionalComponentIs a functional component, ComponentPublicInstanceConstructoris an instance constructor (constructor).

ComponentOptionsInherited ComponentCustomOptions, this interface is empty in the Vue source code. We can use it to customize the attributes in the Vue component options, such as the example in the source code:

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

The defineComponentfunction we use when defining the component is used to help us make the type declaration of the component option, it accepts ComponentOptionsWithoutProps, ComponentOptionsWithArrayPropsor ComponentOptionsWithObjectPropsas an option parameter. They are all inherited ComponentOptionsBase, but have different forms of declaring props. This function can also accept the setup function.

defineComponentFunction returns a DefineComponentclass object, it is ComponentOptionsBaseand ComponentPublicInstanceConstructorthe intersection of class objects:

type DefineComponent = ComponentPublicInstanceConstructor & ComponentOptionsBase && 

CreateAppFunction

In V3, the start of a page is usually from the createAppbeginning, and its type declaration is like this:

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

It accepts a Componentsum attribute as a parameter and returns one App.

App

AppAn instance is a top-level object of Vue, through which you can set shared properties, set plug-ins, register components, set compilation options, set error handling functions, etc.

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

mountThe root component can be mounted to the document through the method, and an ComponentPublicInstanceobject is returned .

ComponentPublicInstance

ComponentPublicInstanceIs a component instance, including $el,'$emit'$props Component ComponentPublicInstance`.emit‘‘" role="presentation" style="box-sizing: inherit; display: inline; font-style: normal; font-weight: normal; line-height: normal; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;" tabindex="0">e m i t ' '$emit‘‘$ Properties such as props. Vue thought that the template, created

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 & Omit

    : P & PublicProps
  $attrs: Data
  $refs: Data
  $slots: Slots
  $root: ComponentPublicInstance | null
  $parent: ComponentPublicInstance | null
  $emit: EmitFn
  $el: any
  $options: Options & MergedComponentOptionsOverride
  $forceUpdate: () => void
  $nextTick: typeof nextTick
  $watch(
    source: string | Function,
    cb: Function,
    options?: WatchOptions
  ): WatchStopHandle
} & P &
  ShallowUnwrapRef &
  UnwrapNestedRefs &
  ExtractComputedReturns &
  M &
  ComponentCustomProperties

Among them $optionsis the intersection of the ComponentOptionsBaseclass object (if any, a renderermethod for functional components ) and MergedComponentOptionsOverride (hook function) when we write components .

P, ShallowUnwrapRef, UnwrapNestedRefs, ExtractComputedReturns, MReading the data component instance attributes and methods can help us to use the this [...] manner.

ComponentCustomPropertiesIt is an empty interface in the source code, and we can use it to customize the attributes on the component instance. Example:

import { Router } from 'vue-router'

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

$Attributes are ComponentInternalInstanceclass objects, representing internal examples of components, including some attributes provided for advanced applications, including VNode.