Typescript + Vue全家桶正确使用姿势

最近休年假回来工作不是很忙，刚好typescript现在如日中天，就研习了一波。

网上看了一堆typescript的教程，github上也看了一堆高star的代码，发现typescript虽然应用广泛，但是和vue结合的工程确实非常少，而且demo都非常简单，花时间整理了一个前后端的全栈demo，地址在：

前端：github.com/angleneo/ed…；

后端：github.com/angleneo/no…

这次主要讲前端的东西，抽时间会把nodejs的后端api讲一下。

webpack配置typescript的教程网上有很多，尝试配置了一下这里就不放代码了，直接拿vue-cli3来用，已经集合了vue全家桶包括typescript的东西，令人惊讶的发现生成的项目结构非常简洁，如图：，比以前的vue-cli简洁太多了功能也强大很多（其中interface-type,tslint-rule是我自己定义的记事本），致敬vue的工作团队，

respect

！

我个人在这次练习中觉得typescript有2个非常突出的优势：

1.类型检查，众所周知javascript是静态弱类型语言，语法相比C，JAVA来说松散许多，新建一个变量都有4种姿势（xx, let xx, const xx, var xx）,在工程中经常会出现因为类型错误而产生的bug。在前后端分离的项目中，传给后端的字段或后端传来的字段忘记考略类型会出现number string傻傻分不清楚的情况，也会碰到后端某次少传一个字段会在前端控制台报undefine 有时候造成整个页面空白，运用了typescript定义每个字段类型后，就避免了这种情况。在这边直接贴上定义类型的代码：

name: string; // '', 'w', '323132123' age: number; // 1 , 2 , 3 flag: boolean; // true, false list: number[]; // [0, 1, 2] arrayList: Array; // [1, 2, 3] xxxx: any; // 任意型，会失去类型检查 undefined: undefined; // undefined null: null; // null listObject: [string, number]; // 元祖类型 ['hello', 1, 333, '12312312']

在这边补充一个经常用到的结构，数组对象:

如果前端输入类型错误，在编辑器会直接报红，如图：

这里我把chinese的number类型换成了string类型，编辑器直接报红，非常智能，避免了类型上的错误。

2.第二点就是强大的代码检查提示，typescript和vscode完美搭配，对于没有遵循tslint规则的代码都会报出错误提示，这样在大型团队协作当中，避免了每个人代码风格不同造成的差异，对代码规范起到很大的作用，这里贴一个代码提示的图：

。

这里再拓展一下typescript和vue结合使用的例子，在vue模板中引入了‘

vue-property-decorator

’，它提供了7种装饰器（在java种叫做注解），用来以面向对象的风格来写代码,这其中装饰器分别为(Model, Component, Prop, Emit, Watch, Provide,

Inject

),每一种都提供了相对于原来vue模板更加简便的使用方式，这里我就简单提三种，其他的在我的github地址可以看。

1：@Component 及其关键的装饰器，取代了以前vue的components钩子函数，用法也很方便

import { Component, Vue } from 'vue-property-decorator'; import headerView from '@/components/header-view.vue'; // @ is an alias to /src import leftMenu from '@/components/left-menu.vue';

@Component({
components: {
headerView,
leftMenu
}
mixins: [mixin]
})
复制代码
           

顺便一说 mixins混合函数也是写在@Components里的。

[email protected],用来取代vue的prop 父向子组件传递数据的函数。用法如下：

@Prop() propA: string = '11' @Prop({ default: 'default value' }) propB: string = '' @Prop([String, Boolean]) propC: string | boolean = 'sss'

[email protected] 父组件往子组件传值，@Inject在子组件接收，很方便，个人觉得可以取代props的作用。

除了钩子函数，模板其他方面也改变了，例如 computed钩子函数取消了，换成了

get xxx(){ return a + b}

计算属性前面加get，在方法里return。

5.methods钩子函数直接省略了，直接写方法就可以。

6.mounted不变。

这里先大概介绍了下typescript和vue结合的应用，很多例如继承interface，泛型，vuex的用法暂时放后面再讲。

再放一遍地址：

前端：github.com/angleneo/ed…；

后端在：github.com/angleneo/no…

参考地址：

segmentfault.com/a/119000001…

www.tslang.cn/docs/home.h…