目前Vue CLI已经内置了TypeScript工具支持。在3.X未来的的计划中，也会增加对TypeScript更多的支持。
一.使用 TypeScript 创建工程
- vue create vue-ts 选择Manually Select Features
Select.png
- 然后选择自己想要的相关配置，例如 Tslint+Prettier
二.基于类的组件
安装官方维护的 vue-class-component 装饰器，可以使用基于类的API。例如
import Vue from 'vue'
import Component from 'vue-class-component'
import home from "../views/home.vue";//导入组件
@Component({
components: { home },
props: {
propMessage: String
}
})
export default class App extends Vue {
// 初始 data
msg = 123
// use prop values for initial data
helloMsg = 'Hello, ' + this.propMessage
// 生命钩子lifecycle hook
mounted () {
this.greet()
}
// 计算属性computed
get computedMsg () {
return 'computed ' + this.msg
}
// 方法method5
greet () {
alert('greeting: ' + this.msg)
}
}
如果想使用@Emit、@Inject、@Model、@Prop、@Provide、@Watch等装饰器,可以安装 vue-property-decorator,使用方式见文档。
npm i -S vue-property-decorator
如果想在项目中使用Vuex,可以安装vuex-class,使用方式见文档
npm install --save vuex-class
三.使用第三方库
在项目中我们经常会使用到一下第三方库，例如组件拖拽的库 Vue.Draggable，首先安装库
npm i -S vuedraggable
然后在组件中导入
import draggable from "vuedraggable";
@Component({
components: { draggable }
})
这个时候编辑器可能会报下面的错。提示你安装声明依赖或者自己添加一个声明文件
Could not find a declaration file for module 'vuedraggable'. 'd:/demo/test/node_modules/vuedraggable/dist/vuedraggable.umd.min.js' implicitly has an 'any' type.
Try `npm install @types/vuedraggable` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuedraggable';`ts(7016)
因为当从 npm 安装第三方库时，还要同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件
如果没有这个库的声明文件的话，我们需要手动声明这个库。src目录下新建一个types目录,然后在types 目录下新建一个 index.d.ts文件
//index.d.ts
declare module "vuedraggable";
这时vuedraggable库就可以正常使用。
