TS尽管让我们的代码变得更多、但是在后续维护上的效果确实可观的
TS中的装饰器作为比较重要的一部分、到底怎么使用的、接下来看代码
装饰器在类上的使用
function desc(target:any){ //装饰器
console.log(target) //这里打印出的target为 [Function: Animals]
--------------------------------------------------------------------------------------------------
**在类上扩展属性或方法**、第一种是返回一个类、这个类要覆盖之前的类
return class extends target{
constructor(name:string){
super(name)
}
sayHi(){} //之前类里面的属性、方法需要再实现一遍
selfsd(){
console.log(this.name)
}
color: string = 'red'
}
}
--------------------------------------------------------------------------------------
第二种：直接挂载到原型上
function desc(target: any){
console.log(target)
target.prototype.color = 'red' //直接挂载到原型上、避免重复实现之前类的属性和方法、使用的时候直接打印实例.color即可
}
----------------------------------------------------------------------------------------------------------------
@desc
class Animals {
constructor(public name:string){
this.name = name
}
sayHi(){
return `My name is ${this.name}`
}
}
let Tom = new Animals('Tom')
console.log(Tom.color) //
Tom.selfsd() //这里扩展的属性就能使用
装饰器在类中函数上的使用
function desc(params: string): any{
console.log('这是装饰器传来的参数：'+params)
return function(target: any,key: string,desciptor: {[propnames:string]: any}){ //这三个参数只有前两个是必须添加的
console.log(target) //这是类的原型、可以直接在上面添加属性方法
console.log(key) //这是装饰器装饰的类中的方法名
console.log(desciptor) //这是方法的描述对象 其中的value可以重写覆盖之前方法、如果想使用之前的方法、我们也可以使用、这里不做描述
target.name = "胡歌"
}
}
class fullname {
fullname: string
constructor(public firstname:string ,public lastname: string){
}
@desc('这是传向装饰器工厂函数的参数')
fullnames(){
this.fullname = this.firstname + this.lastname
}
}
let person: any = new fullname('hu','ge')
console.log(person.name)
装饰器在类中属性上的使用
function desc(target:any,name:string){
console.log(target) 这里依旧是类的原型
console.log(name) 这里是类的属性的name
}
class Alls {
@desc
name: string
constructor(){
}
say(world: string){
return `I say ${world}`
}
}
let world = new Alls()
装饰器在参数上的使用
function desc(target:any,key:string,index:number){
console.log(target) target不多说、依旧原型
console.log(key) 注意*这里的key是修饰参数的函数名、即say*
console.log(index) 这里打印出0、相当于第一个参数。如果有第二个参数、这三个会打印两次、首先打印出来的是第二个参数对应的
}
class Alls {
constructor(){
}
say(@desc world: string){
return `I say ${world}`
}
}
let world = new Alls()
world.say('hello')
以上就是装饰器在类中的应用、我们可以对其展开一些调整、具体根据自身业务需求
TS虽然会使你写的代码量变多、但是它便于后期维护上
在前端这一方面
我远没有达到精通、只是一直在路上
