Vue + TypeScript 组合拳入门篇：一经过一番学习实践，Vue 中使用JS做项目已经挺熟练了。但是如果想要

经过一番学习实践，Vue 中使用JS做项目已经挺熟练了。但是如果想要再进一步，你就会发现，为什么很多大厂的前端开源库和组件库都使用 Typescript 而不是 JavaScript？

很多大厂开源的项目，包括前端流行的一些框架如 Vue 和 React 都用 TS 进行了重写。可以看出，TypeScript 未来做前端大型项目和开源库的首选语言，用以替代 JavaScript。

首先，有必要了解一下什么是 TypeScript ？

TypeScript 是什么

简单地说，TypeScript 是 JavaScript的超集，它可以编译成纯 JavaScript 代码。它是由微软开发的，背靠巨无霸公司的背景，在市场上已颇具影响力。

随着ES6的发布, JavaScript取得了巨大的进步，逐渐完善并严谨起来。那为什么还会出现选择 TypeScript 这门语言的趋势？主要是因为现在的设备性能的提升，产品需求和用户体验需求的上升，开发的项目体积越来越庞大，复杂度也是水涨船高，在这样的应用背景下，JavaScript缺乏其可靠性，在使用的时候需要我们为了代码的可维护性和健壮度 ，需要另外添加很多业务逻辑去判断。

前端人显然需要更加强大的语言的支持，那么，使用 TypeScript 就是一种很好的选择。它增强了编辑器在“智能提示”，“跳转定义”，“代码补全”等方向上的功能，并且可以在编译阶段发现大部分的 bug，这对于大型项目的代码可读性和可维护性起到了巨大的作用。

Typescript 为 Javascript 增加类型能力，主要作用就是可以避免 JS 弱类型类型不定下产生的各种问题。另外，TypeScript 可以运行在浏览器环境、Node.js 环境或者 ECMAScript5 以及更高版本的 JavaScript 的引擎中。因为最终他可以被转译为 JS 语法，所以兼容性上来是没有问题的。

Typescript 因为它的纠错优势以及很强的兼容性，逐渐火热成为主流选择，前端领域热门的第三方库项目、主流框架等，都开始使用TypeScript进行重写，并添加很多针对 Typescript 的兼容性和便捷性设计。没有使用 TypeScript 重写的开源和第三方项目，也多添加了 TypeScript 声明，方便你在 TypeScript 中调用他们。

Vue + TypeScript 组合拳

那么接下来，就来讨论下在 Vue 框架中使用 TypeScript 语言搭建项目的一些需要注意的基本事项吧。

组件的引入和声明

vue的官方文档中，关于搭建 Vue + TypeScript 项目的建议是，使用 vue-class-component 这一装饰器。他是一种类 Class 的装饰器，因为 TS 中更常用 Class 这种写法。

而我实际使用的是 vue-property-decorator: 基于 vue 组织的 vue-class-component 所做的拓展装饰器。声名并引入组件的方法如下：

import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'

我们已经很熟悉了，使用 JS 在 vue 组件文件中的组件声明写法：

export default {name:'App',data:...}

使用 TypeScript，需要改为

import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";

@Component({ 
components: { HelloWorld }
})
export default class App extends Vue {}

需要注意的是，引入组件时即使没有使用组件也得书写 @Component。

data 写法

与 Vue 在 JS 中的常规写法不同，data 不用写作一个 return{} 函数返回值的形式，而是可以直接写在类组件里面。

export default class Home extends Vue {
private name = "Alex";
}

methods写法

同 data一样，可以在类组件内直接写方法。

export default class Home extends Vue {
 a = 1;
 add(): void {
 this.a += 1;
}

computed声明写法

计算属性 computed 的声明跟 methods 方法类似，就是特殊一些，需要设置一对 getter，在方法名前面加get，表明此属性是计算属性。

export default class HelloWorld extends Vue {
get fullName() {
return this.familyName + ' ' + this.name;
}
}

更多属性声明写法下篇文章继续分享心得。。。

Vue + TypeScript 组合拳入门篇： 一