vue + typescript 项目起手式

最后更新于2018-06-30，技术文具备时效性，请知悉 

我知道大家早就想用上 vue + ts 强类型了

还有后续 vue + typescript 进阶篇

• 安装vue-cli
• 安装ts依赖
• 配置 webpack
• 添加 tsconfig.json
• 添加 tslint.json
• 让 ts 识别 .vue
• 改造 .vue文件

什么是typescript

TypeScript 是 JavaScript 的强类型版本。而后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。因为最终在浏览器中运行的仍然是 JavaScript，因此 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript 是 JavaScript 的超集，这意味着他支持全部的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提高代码的可阅读性。

与此同时，TypeScript 也是 JavaScript ES6 的超集，Google 的 Angular 2.0 也宣布采用 TypeScript 进行开发。这更是充分说明了这是一门面向将来而且脚踏实地的语言。

强类型语言的优点在于静态类型检查，具体能够参见 http://www.zhihu.com/question... 的回答。归纳来讲主要包括如下几点：

1. 静态类型检查
2. IDE 智能提示
3. 代码重构
4. 可读性

静态类型检查能够避免不少没必要要的错误, 不用在调试的时候才发现问题

前言

随着vue2.5 更好的 TypeScript 集成，同时由于新开项目的契机，故准备动手尝试一下typescript + vue

都说ts万般好，不如一个段子来的直观，一个程序员自从用上了ts以后，连续写了3000+行代码一次编译经过一鼓作气，而后很激动的打电话跟老婆炫耀这件事情，老婆回了一句 哦

以前看文章或者 demo 一直认为 vue + typescript 以后就不能友好的写.vue单文件，而且我也在各类 live 中问vue + ts 或者 flow的集成，也一直没有问出什么好的实践，可是本上强上ts的念头，一个字，就是干！

终于决定本身动手，那接下来从 vue-cli 开始配置 ts，看看事实上集成 ts 的体验究竟是如何呢？

---

先贴一张最后配置完毕的.vue文件 ，template 和 style 跟之前的写法保持一致，只有 script 的变化

起手vue-cli

这步应该不用写了

Vue 引入 TypeScript

首先Cli以后，接下来须要安装一些必要/之后须要的插件

这些库大致的做用，能够按需引入：

• vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器 加强 Vue 组件
• vue-property-decorator：在 vue-class-component 上加强更多的结合 Vue 特性的装饰器
• ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件
• tslint-loader跟tslint：我想你也会在.ts .tsx文件 约束代码格式（做用等同于eslint）
• tslint-config-standard：tslint 配置 standard风格的约束

配置 webpack

首先找到./build/webpack.base.conf.js

• 找到entry.app 将main.js 改为 main.ts, 顺便把项目文件中的main.js也改为main.ts, 里面内容保持不变

• 找到resolve.extensions 里面加上.ts 后缀 （是为了以后引入.ts的时候不写后缀）

• 找到module.rules 添加webpack对.ts的解析

是否是加完了，那如今来解释一下

ts-loader 会检索当前目录下的 tsconfig.json 文件，根据里面定义的规则来解析.ts文件（就跟.babelrc的做用同样）

tslint-loader 做用等同于 eslint-loader

添加 tsconfig.json

接下来在根路径下建立tsconfig.json文件

这里有一份参考的 tsconfig.json 配置，完成的配置请点击 tsconfig.json：

顺便贴一份本身的配置

添加 tslint.json

在根路径下建立tslint.json文件

这里就很简单了，就是 引入 ts 的 standard 规范

让 ts 识别 .vue

因为 TypeScript 默认并不支持 *.vue 后缀的文件，因此在 vue 项目中引入的时候须要建立一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts

敲黑板，下面有重点！

意思是告诉 TypeScript *.vue 后缀的文件能够交给 vue 模块来处理。

而在代码中导入 *.vue 文件的时候，须要写上 .vue 后缀。缘由仍是由于 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：

改造 .vue 文件

在这以前先让咱们了解一下所须要的插件（下面的内容须要掌握es7的装饰器, 就是下面使用的@符号）

vue-class-component

vue-class-component 对 Vue 组件进行了一层封装，让 Vue 组件语法在结合了 TypeScript 语法以后更加扁平化：

上面的代码跟下面的代码做用是同样的

vue-property-decorator

vue-property-decorator 是在 vue-class-component 上加强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器：

• @Emit
• @Inject
• @Model
• @Prop
• @Provide
• @Watch
• @Component (从 vue-class-component 继承)

在这里列举几个经常使用的@Prop/@Watch/@Component, 更多信息，详见官方文档

上面的代码至关于：

开始修改App.vue文件

1. 在script 标签上加上 lang="ts", 意思是让webpack将这段代码识别为typescript 而非javascript
2. 修改vue组件的构造方式( 跟react组件写法有点相似, 详见官方 )， 以下图
3. 用vue-property-decorator语法改造以前代码

固然也能够直接复制下面的代码替换就能够了

接下来用相同的方式修改HelloWorld.vue便可

npm run dev

这个时候运行项目就应该能正常跑起来了

到这里咱们的配置就已经结束了

最后

若是按照文章没有配置出来，能够参考此repo vue-typescript-starter (安全按照文章一步一步操做的版本)

总的来讲，就如本文最初讲，ts 从数据类型、结构入手，经过静态类型检测来加强你代码的健壮性，从而避免 bug 的产生。

同时能够继续使用.vue单文件

并且我我的认为加上了typescript，项目逼格提高2个level，也能让后端大哥们不吐槽js弱语言的诟病了

相信以后 vue 对于 ts 的集成会更加友善，期待尤大以后的动做