Vue开发：TypeScript开发Vue3项目

发表于 更新于 分类于 阅读次数：
本文字数： 660 阅读时长 ≈ 1 分钟
用 TypeScript 全面拥抱 Vue 吧！

介绍

在 Vue3 中使用 TypeScript，可以使用官方的 Vue-Class-Component 插件来开发

本文介绍的也是基于该插件来开发的

文档：官方链接 / 翻译

注意：文档并不是最新的，可关注 Issue 部分

对比

计算属性

原 Vue 开发方式：直接在 Computed 将所需内容通过函数返回即可

1
2
3
4
5
6
7
8
9
10
11
data: {
	return {
		firstName: 'John';
		lastName: 'Mike';
	}
}
computed: {
	name() {
		return this.firstName + ' ' + this.lastName;
	}
}

Class 开发方式：将原 Computed 函数拆封成 getter/setter 方式

1
2
3
4
5
6
7
8
9
10
public firstName = 'John';
public lastName = 'Mike';
public get name() {
	return this.firstName + ' ' + this.lastName;
}
public set name(value){
	const splited = value.split(' ');
	this.firstName = splited[0];
	this.lastName = splited[1];
}