这篇文章给大家分享的是有关怎么在Vue项目中应用TypeScript类的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
TypeScript是基于vue-class-component库而来，这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库
主要的功能如下：
methods 可以直接声明为类的成员方法
计算属性可以被声明为类的属性访问器
初始化的 data 可以被声明为类属性
data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法
所有其他属性，需要放在装饰器中
vue-property-decorator 主要提供了以下装饰器
@Prop
@PropSync
@Model
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
@Component (由 vue-class-component 提供)
Mixins (由 vue-class-component 提供)
Component装饰器它注明了此类为一个Vue组件，因此即使没有设置选项也不能省略
如果需要定义比如 name、components、filters、directives以及自定义属性，就可以在Component装饰器中定义，如下：
计算
安全
数据库
网络和加速
企业服务
import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';
@Component({
components:{
componentA,
componentB,
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
})
export default class YourCompoent extends Vue{
}这里取消了组件的data和methods属性，以往data返回对象中的属性、methods中的方法需要直接定义在Class中，当做类的属性和方法
@Component
export default class HelloDecorator extends Vue {
count: number = 123 // 类属性相当于以前的 data
add(): number { // 类方法就是以前的方法
this.count + 1
}
// 获取计算属性
get total(): number {
return this.count + 1
}
// 设置计算属性
set total(param:number): void {
this.count = param
}
}组件接收属性的装饰器，如下使用：
import {Component,Vue,Prop} from vue-property-decorator;
@Component
export default class YourComponent extends Vue {
@Prop(String)
propA:string;
@Prop([String,Number])
propB:string|number;
@Prop({
type: String, // type: [String , Number]
default: 'default value', // 一般为String或Number
//如果是对象或数组的话。默认值从一个工厂函数中返回
// defatult: () => {
// return ['a','b']
// }
required: true,
validator: (value) => {
return [
'InProcess',
'Settled'
].indexOf(value) !== -1
}
})
propC:string;
}实际就是Vue中的监听器，如下：
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {}
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) {}
@Watch('person')
onPersonChanged2(val: Person, oldVal: Person) {}
}vue-property-decorator 提供的 @Emit 装饰器就是代替Vue中的事件的触发$emit，如下：
import {Vue, Component, Emit} from 'vue-property-decorator';
@Component({})
export default class Some extends Vue{
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
this.emitTodo('world');
}
@Emit()
emitTodo(n: string){
console.log('hello');
}
}感谢各位的阅读！关于“怎么在Vue项目中应用TypeScript类”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
