TypeScript support


Vue CLI provides built-in TypeScript tool support.


Directory


##Published as the official declaration file of the NPM package

The static type system can help you effectively prevent many potential runtime errors, and as you The applications will become more prominent as they become more mature. That's why Vue not only provides
official type declarations

for TypeScript for Vue core, but also for Vue Router and Vuex corresponding declaration file.
Moreover, we have

published them to NPM

, and the latest version of TypeScript knows how to parse type declarations from NPM packages by itself. This means that as long as you successfully install it through NPM, you no longer need any additional tool assistance to use TypeScript in Vue.


##Recommended configurationstrict : true
(or at least

noImplicitThis: true, which is part of the strict pattern) to take advantage of the type checking of this in the component method, otherwise it would Always treated as any type. See TypeScript Compiler Options Documentation (English)

to learn more.


Development tool chain


##Project Creation

Vue CLI 3 You can use TypeScript to generate new projects. How to create: 

# 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli

# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name


Editor Support

To develop Vue applications using TypeScript, we strongly recommend It is recommended that you use Visual Studio Code, which provides excellent "out of the box" support for TypeScript. If you are using Single File Components (SFC), you can install the Vetur plugin that provides SFC support and other more useful features.

WebStorm also provides "out-of-the-box" support for TypeScript and Vue.


Basic usage

To make TypeScript correctly infer the type in the Vue component options, You need to define the component using Vue.component or Vue.extend: 

import Vue from 'vue'
const Component = Vue.extend({
  // 类型推断已启用
})
const Component = {
  // 这里不会有类型推断，
  // 因为TypeScript不能确认这是Vue组件的选项
}


Class-based Vue components

If you prefer a class-based API when declaring components, you can use the officially maintained vue-class-component Decorator: 

import Vue from 'vue'
import Component from 'vue-class-component'

// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的属性
  message: string = 'Hello!'
  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}


Enhanced types to be used with plugins

Plugins Vue's global/instance properties and component options can be added. In these cases, making the plugin in TypeScript requires type declarations. Fortunately, TypeScript has a feature to supplement existing types called module augmentation.

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

// 1. 确保在声明补充的类型之前导入 'vue'
import Vue from 'vue'
// 2. 定制一个文件，设置你想要补充的类型
//    在 types/vue.d.ts 里 Vue 有构造函数类型
declare module 'vue/types/vue' {
// 3. 声明为 Vue 补充的东西
  interface Vue {
    $myProperty: string
  }
}

Include the above as a declaration in your project After the code in the file (like my-property.d.ts), you can use $myProperty on the Vue instance. 

var vm = new Vue()
console.log(vm.$myProperty) // 将会顺利编译通过

You can also declare additional properties and component options: 

import Vue from 'vue'

declare module 'vue/types/vue' {
  // 可以使用 `VueConstructor` 接口
  // 来声明全局属性
  interface VueConstructor {
    $myGlobal: string
  }
}

// ComponentOptions 声明于 types/options.d.ts 之中
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }
}

The above declaration allows the following code to compile successfully: 

// 全局属性
console.log(Vue.$myGlobal)

// 额外的组件选项
var vm = new Vue({
  myOption: 'Hello'
})


Mark return value

Because Vue’s declaration file is inherently circular, TypeScript may have difficulty in inferring the type of a method. . Therefore, you may need to annotate return values ​​on methods in render or computed. 

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // 需要标注有 `this` 参与运算的返回值类型
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // 需要标注
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` 是可推导的，但是 `render` 需要返回值类型
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

If you find that type deduction or member completion is not working, marking a method may help you solve the problem. Using the --noImplicitAny option will help you find these unannotated methods.