TypeScript Support

Important 2.2 Change Notice for TS + webpack 2 users

In Vue 2.2 we introduced dist files exposed as ES modules, which will be used by default by webpack 2. Unfortunately, this introduced an unintentional breaking change because with TypeScript + webpack 2, import Vue = require('vue') will now return a synthetic ES module object instead of Vue itself.

We plan to move all official declarations to use ES-style exports in the future. Please see Recommended Configuration below on a future-proof setup.

NPM package 中官方声明文件

静态类型系统可以帮助防止许多潜在的运行时错误,特别是随着应用程序的增长. 这就是为什么Vue使用带 TypeScript 的官方的类型声明 - 不仅是用在Vue-core,也用在 Vue-routerVuex

由于这些声明文件是在 NPM 上发布的,你甚至不需要像 Typings 这样的外部工具,因为声明是用Vue自动导入的。 这意味着你需要的是简单的引入 Vue:

推荐的配置

// tsconfig.json
{
"compilerOptions": {
// ... other options omitted
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"es5",
"es2015.promise"
]
}
}

Note the allowSyntheticDefaultImports option allows us to use the following:

import Vue from 'vue'

instead of:

import Vue = require('vue')

The former (ES module syntax) is recommended because it is consistent with recommended plain ES usage, and in the future we are planning to move all official declarations to use ES-style exports.

In addition, if you are using TypeScript with webpack 2, the following is also recommended:

{
"compilerOptions": {
// ... other options omitted
"module": "es2015",
"moduleResolution": "node"
}
}

This tells TypeScript to leave the ES module import statements intact, which in turn allows webpack 2 to take advantage of ES-module-based tree-shaking.

See TypeScript compiler options docs for more details.

访问Vue的类型声明

Vue的类型定义导出雨多有用的 类型声明。例如,注释一个组件的选择对象(例如在一个 vue 文件):

import Vue, { ComponentOptions } from 'vue'
export default {
props: ['message'],
template: '<span>{{ message }}</span>'
} as ComponentOptions<Vue>

类-样式Vue组件

Vue 组件选项可以很容易地注释类型:

import Vue, { ComponentOptions } from 'vue'
// Declare the component's type
interface MyComponent extends Vue {
message: string
onClick (): void
}
export default {
template: '<button @click="onClick">Click!</button>',
data: function () {
return {
message: 'Hello!'
}
},
methods: {
onClick: function () {
// TypeScript knows that `this` is of type MyComponent
// and that `this.message` will be a string
window.alert(this.message)
}
}
// We need to explicitly annotate the exported options object
// with the MyComponent type
} as ComponentOptions<MyComponent>

不幸的是,这里有一些限制:

幸运的是, vue-class-component 可以解决这两个问题。这是一个官方的库,允许您用 @component 装饰器,像原生 JavaScript 类那样声明组件库。让我们重写上述组件作为一个示例:

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({
// All component options are allowed in here
template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
// Initial data can be declared as instance properties
message: string = 'Hello!'
// Component methods can be declared as instance methods
onClick (): void {
window.alert(this.message)
}
}

由于这种语法的替代,我们的组件定义不仅更短,而且 TypeScript 也可以推断出 messageonClick 的类型没有显式接口声明。这种策略甚至允许您处理类型为计算属性,生命周期钩子和渲染功能。完整的使用细节,请参阅vue-class-component文档。