27 | 工具 - TypeScript 支持

主要内容：

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操作项将帮助你发现这些未注释的方法。