Vue项目中应用Typescript
Vue CLI内置了TypeScript的支持，并且@vue/cli3提供了TypeScript插件，因此搭建支持TypeScript的vue工程非常方便
1 创建工程
npm install -g @vue/cli
1
node环境要求在8及以上 window系统不支持通过命令行 需要下载安装包进行升级
vue create project-name
1
2 添加Typescript 插件
为工程添加TypeScript插件，进入工程目录
vue add typescript
// 执行该指令后 会在项目目录中修改、或添加ts文件
1
2
2
添加成功后，我们来看下工程结构,插件已将.js文件修改成了.ts
vue-cli-plugin-typescript插件除了添加了typescript相关依赖之外，我们需要关注下vue-class-component和vue-property-decorator，这两者是VUE的装饰器，vue-property-decorator依赖vue-class-component，class-style模式下开发时可使代码更加简明、可读，接下来我们会举例介绍怎样更高效、优雅的书写Vue代码
3 使用Ts开发Vue
import { Component, Vue } from "vue-property-decorator";
@Component({})
export default class Foo extends Vue {
}
1
2
3
4
5
6
2
3
4
5
6
声明响应式属性 data
export default class App extends Vue {
private name: string = 'kaelyn'; // 声明响应式属性
}
1
2
3
2
3
这样的写法等同于之前的
export default {
name: 'App',
data() {
return {
name: 'kaelyn'
}
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
计算属性
<template>
<div id="app">
<button @click="age = number + 1">+</button>
<p>{{age}}</p>
<button @click="age = number - 1">-</button>
</div>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
import { Component, Vue } from 'vue-property-decorator';
@Component({})
export default class App extends Vue {
private number: number = 0;
get age(): string { // 计算属性的get
return `I am ${this.number} years old`;
}
set age(value) { // 计算属性的set
this.number = Number(value);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
这样的写法等于之前的：
computed: {
age: {
get: function () {
return `I am ${this.number} years old`
},
set: function (value) {
this.number = Number(value)
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
分享个小技巧，如果想要传参给 computed，可以令计算属性返回一个函数：
get foo() {
// ...
return (params: any) => {
let returnValue;
// ...
return returnValue;
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8