主要内容:
- JavaScript在官方的声明及推荐配置
- 创建工程及编码的开发工具推荐
- 基本用例演示
- 基于类风格的Vue组件
- 插件使用中的参数类型
- 注释返回类型
Vue CLI提供了构建 TypeScript工具支持。在Vue的下一个主要版本(3.x)我们也计划更多的提供我们对TypeScript的支持,使用基于类组件的API和TSX支持
在NPM包的官方声明
一个静态的系统能阻止许多潜在的运行时错误,尤其是随着应用的不断成长。这就是为什么在Vue core提供了TypeScript的official type declarations,还为vue-router和vuex提供了相应声明。
由于这些是被发布在NPM,最新版本的TypeScript知道怎么去在NPM包里解析类型声明,这意味着通过NPM安装的时候,你不需要使用任何额外的工具,就可以在Vue使用TypeScript.
被推荐的配置
// tsconfig.json
{
"compilerOptions": {
// 与浏览器的支持保持一致
"target": "es5",
// 可以对'this'上的属性数据进行更严格的推断
"strict": true,
// 如果使用webpack 2+ 或 rollup, 可以利用tree shaking:
"module": "es2015",
"moduleResolution": "node"
}
}
注意你必须包含strict:true
(或至少noImplicitThis: true
,它是trict
标记的一部分)去在this
组件方法中启用类型检查,否则它总是被当做any
对待。
更多的细节查看类型编译器选项文档(英).
开发工具
创建工程
Vue CLI 3可以使用TypeScript生成新的工程。创建方式:
# 1. 安装Vue CLI,如果它没有被安装过
npm install --global @vue/cli
# 2. 创建一个新的工程,而后选择'手动选择功能'选项
vue create my-Project-name
编辑器支持
对于使用Vue开发TypeScript,我们强烈建议使用Visual Studio Code,提供了很好的对TypeSript的’开箱即用‘的支持。如果你使用单文件组件(SFCs),可以使用Vetur extenstion,该插件提供了在SFCs的TypeScript推断和和其他许多很棒的功能。
WebStorm也提供了对Vue和TypeScript的开箱即用的支持。
基本用例
去让TypeScript在Vue组件操作项内做正确的类型推断,你需要使用Vue.component
或Vue.extend
定义组件:
import Vue from 'vue'
const Component = Vue.extend({
// 能够做类型推断
})
const Component = {
// 这样没有类型推断
// 因为TypeScript不能确定这是Vue组件的操作项
}
基于类的Vue组件
如果你在声明类的时候喜欢使用基于类的API,你可以使用官方维护的vue-class-component装饰器。
import Vue form '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)
}
}
扩展插件使用的类型
插件可以增加Vue的全局/实例属性和组件操作项。在某些情况下,在TypeScript中编译插件需要类型声明。幸运的是,有一个TypeScript的特性去扩展已经存在的类型称为模块扩展.
例如,使用类型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
}
}
在你的工程里面包含以上代码作为声明文件(像my-property.d.ts
)之后,你能够在Vue实例使用$myProperty
.
var vm = new Vue()
console.log(vm.$myProperty) // 这里应该编译成功
你也能够声明额外的全局属性和组件选项:
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
}
}
以上的声明允许以下代码被编译:
// 全局属性
console.log(Vue.$myGlobal)
// 新增的组件选项
var vm = new Vue({
myOption: 'Hello'
})
注释返回类型
由于Vue的声明文件是天生循环的,TypeScript去推断特定方法的类型可能比较困难。因为这个理由,你可能需要在像render
方法和这些computed
中注释返回类型。
import Vue, { VNonde } from 'vue'
const Component = Vue.extend({
data () {
return {
msg: 'Hello'
}
},
methods: {
// 由于返回类型中的'this'需要注释
greeting(): string {
return this.msg + 'world'
}
},
computed: {
// 需要注释
greeting(): string {
return this.greet() + '!'
}
},
// 'createElement'被推断出来,但是'render'需要返回类型
render (createElement): VNode {
return createElement('div', this.greeting)
}
})
如果你发现类型推断或成员补齐不起作用,标注某些方法可能帮助处理这些问题,可以使用 -- noImplicitAny
操作项将帮助你发现这些未注释的方法。