Vue+TypeScript项目实践(一)

目前Vue CLI已经内置了TypeScript工具支持。在3.X未来的的计划中,也会增加对TypeScript更多的支持。

一.使用 TypeScript 创建工程

  1. vue create vue-ts 选择Manually Select Features
  1. 然后选择自己想要的相关配置,例如 Tslint+Prettier

二.基于类的组件

安装官方维护的 vue-class-component 装饰器,可以使用基于类的API。例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
然后在组件中导入

1
2
3
4
import draggable from "vuedraggable";
@Component({
components: { draggable }
})

这个时候编辑器可能会报下面的错。提示你安装声明依赖或者自己添加一个声明文件

1
2
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文件

1
2
//index.d.ts
declare module "vuedraggable";

这时vuedraggable库就可以正常使用。