Intensive reading of the Vue official document series 🎉

The official announcement file released as the NPM package

Vue already provides type declarations in the form of NPM packages for Vue-core, Vuex, and Vue-router, and the latest TypeScript versions know how to parse type declarations from NPM packages.

The recommended configuration

In the tsconfig.js configuration file, it is recommended that strict:true or at least noImplicitThis: true be turned on to check the type of this in component methods, otherwise it will always be considered to be of type any.

Basic usage

Components created by vue2.x must be defined using vue.extend () or Vue.Component() methods if they want to be typed correctly in TypeScript.


import Vue from 'vue'

const Component = Vue.extend({

// Type inference is enabled

});

Copy the code

const Component = {

// There will be no type inference,

// Because TypeScript does not confirm that this is an option for the Vue component

}

Copy the code

export default Vue.extend({

// Type inference is enabled

});

Copy the code

Enhanced types for use with plug-ins

With TypeScript’s Module Augmentation feature, we can type declarations for Vue’s custom properties or methods. This is useful when creating plugins that add global/instance properties and component options to the Vue.

For example, declare an instance of string property $myProperty:

// 1. Make sure to import 'vue' before declaring the supplementary type.
import Vue from 'vue'

// 2. Customize a file and set the types you want to add
// In types/vue.d.ts, vue has a constructor type
declare module 'vue/types/vue' {
    // 3
    interface Vue {
        $myProperty: string}}Copy the code

After you include the above code as a declaration file in your project, you can use $myProperty on your Vue instance.

var vm = new Vue()
console.log(vm.$myProperty) // will compile smoothly
Copy the code

In the same way, you can declare an additional global static property for the Vue constructor:

delcare module 'vue/types/vue' {
    interface VueConstructor {
        $t:Translate | string}}Copy the code

Alternatively, declare additional component options:

delcare module 'vue/types/options' {
    interface ComponentOptions<v extendsVue> { myOption? :string}}Copy the code

You can then define custom component options for the component and get them from $options.

Annotate return value

Just as we declare the return value type of a function when we define a function in TypeScript, we strongly recommend declaring the return value type for render methods on Vue components, methods defined in Methods, and computed.

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
    data() {
        return {
            msg: 'Hello'}},methods: {
        // We need to mark the return value type with 'this' involved in the operation
        greet(): string {
            return this.msg + ' world'}},computed: {
        // Need to be marked
        greeting(): string {
            return this.greet() + '! '}},// 'createElement' is deductible, but 'render' requires a return value type
    render(createElement): VNode {
        return createElement('div'.this.greeting)
    }
})
Copy the code

Mark Prop

The props member type for the component option:

A basic data type can be declared directly using its constructor.

Reference types require the PropType type annotation tool provided by Vue to describe in detail the specific type of each member.

import Vue, { PropType } from 'vue'

interface ComplexMessage {
    title: string.okMessage: string.cancelMessage: string
}
const Component = Vue.extend({
    props: {
        name: String.success: { type: Number },
        callback: Function as PropType<() = > void>,
        message: {
            type: Object as PropType<ComplexMessage>,
            required: true.validator(message: ComplexMessage) {
                return!!!!! message.title; }}}})Copy the code

Note that the PropType tool can only be used in conjunction with vue. extend or Vue.Component, because this is not any only for component objects created using these two methods.

In addition, you can also declare the detailed type of a member by combining the type assertion of TS with the return value of the function declaration.

export default Vue.extend({
    name: "HelloWorld".props: {
        msg: Object as() = > {name: string; key: number}},mounted() {
        const p = this.msg; p.name; }});Copy the code