ts装饰器基本使用

207 阅读1分钟

ts中装饰器 主要分为 属性装饰器、类装饰器、方法装饰器、参数装饰器

类装饰器

//普通装饰器
let eat = function (target: any) {
    //个人理解  这个target  就是person的原型  
    //在原型上面挂载新的属性
    target.prototype.name = "小白"
}
@eat
class Person {
}
let p:any = new Person()
console.log(p.name)//  小白


装饰器工厂(个人理解   可以传参的装饰器)
let eat = function (par: string) {
    console.log(par)//  巧克力慕斯
    return function (target: any) {
        target.prototype.name = par
    }
}

@eat("巧克力慕斯")
class Person {
    name: string | undefined
}
let p = new Person()
console.log(p.name)//巧克力慕斯

属性装饰器

// 个人理解  可以操装饰器下面的属性
let setName = function (par: string) {
    //par setname传进来的参数
    return function (target: any, p: any) {
        //target是  person的原型
        //p是要操作的属性的key值
        target.name = par//  注意  这个位置   target找name属性的时候   不是target.prototype
       //target[p] = par  也可以这样写
  }
}
class Person {
    @setName("小白")
    name: string | undefined
}
let o: any = new Person()
console.log(o.name)//  小白

下面这种方法 重载构造函数 直接覆盖掉 image.png