截至 2019 年底， TypeScript （简称 ts ）已经与 Python 并列成为第二受欢迎的开发语言，仅次于 Rust 。如果你还不清楚到底什么是 ts ，请先移步至 ts 中文网 了解。再过几个月 Vue3.0 版本就将正式发布，源码完全使用 TypeScript 编写， Vue 与 TypeScript 的集成势必将成为接下来的趋势。
鉴于手头刚好有一个新项目要做，就想着提前先体验一把。新项目使用 Vue-cli3.0 + TypeScript3.0 开发（因为 Vue-cli2.0 与 ts 的集成体验并不好，所以就不考虑了），其实 Vue-cli3.0 脚手架中已经集成了 ts ，在创建项目时我们只要选择基于 ts 的开发模式就行。下面我们就来说一下具体的操作：
一、创建项目
Vue-cli3.0 创建项目的命令为 vue create vue-ts （ vue-ts 为项目名称），这个大家应该都知道，命令执行后会出现如下的界面
然后直接回车就可以了。但创建基于 ts 的项目是要选择手动创建( Manually select features) ，回车后会出现以下界面
通过 上 /下键和空格键选择要用到的插件，选好后回车进入下一步，对于后面的选项可以一路默认，也可以根据个人意向选择，这样项目就创建好了，项目结构如下
然后启动运行将看到如下界面
其中 tsconfig.json 是 ts 项目的配置文件，各配置项的作用可以去 ts 中文网 了解。
shims-vue.d.ts 文件用来对 vue 进行声明，为什么要进行这样的声明呢？因为 ts 无法自动识别 .vue 后缀的文件。对该文件的详解可以自己先去查文档。
二、语法结构
对于 .ts 后缀的文件，因为 TypeScript 是 JavaScript 的一个超集，所以我们完全可以在 ts 文件中编写 js 代码。。。但不建议这样做，毕竟 ts 是一门面向对象的语言，最好还是要体现出面向对象的特性，至少可以用下 ts 中的类 class 。如果你刚好会一门面向对象语言（比如 java 或者 c++ ）的话就很容易理解我这句话的意思，否则请回过头再去多看看 ts 的文档。
其实这里真正想说的是 vue 文件的语法结构，对于上面创建好的项目我们可以打开 App.vue 文件看一下，模板 template 和样式 style 部分的写法基本没有什么差异，最大的不同就是脚本 script 部分的写法，脚本部分代码如下
到这里呢有两个插件我们需要先了解以下， vue-class-component 和 vue-property-decorator ， vue-class-component 是官方提供的使用类的方式编写组件， vue-property-decorator 则完全依赖于前者，它将一些常用的钩子都封装成了装饰器，使用起来更方便简洁一些，具体的语法请参考 vue-property-decorator 官方文档。
如果想要在 ts 项目中使用 vuex ，还需要引入另外一个插件 vuex-class ，官方文档中也对具体的语法给出了详细说明。
对于 vue 与 typescript 的集成开发，该篇也只是给出了应用指引，具体还需要个人去学习文档并亲自动手实践才能有所掌握和体会。后续也会基于 ts 给出一些应用实例 ~
查看更多关于应用十：Vue之Vue与TypeScript集成开发的详细内容...