typescript 装饰器用法

最新推荐文章于 2023-12-23 18:54:40 发布

jjw_zyfx

最新推荐文章于 2023-12-23 18:54:40 发布

阅读量1.2k

点赞数

分类专栏：前端 typescript 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/128634179

版权

前端同时被 2 个专栏收录

296 篇文章 0 订阅

订阅专栏

typescript

23 篇文章 0 订阅

订阅专栏

函数装饰器

function testDecorator(isTrue: boolean){
    console.log("111111111")
    if(isTrue){
        return function(class_name: any){
            console.log("2222222")
            console.log(class_name) // 输出的是类名
            class_name.prototype.getName= () => {  // 给类添加方法(在原型上添加相当于在类上添加)
                console.log('dell');
            };
        }
    }else{
        return function(class_name: any){}
    }
}

function decorator(class_name: any){
    console.log("333333333")
    console.log(class_name) // 输出的是类名
    class_name.prototype.getName= () => {  // 给类添加方法(在原型上添加相当于在类上添加)
        console.log("44444444")
        console.log('dell~');
    }
};

@testDecorator(true)
@decorator  // 
class AAA {
   constructor(){console.log('aaa')} 
}

const aaa = new AAA();
(aaa as any).getName()


// 输出结果
/*
111111111  说明先装饰最上边的，即装饰顺序是从上到下(定义装饰)
333333333
[class AAA]
2222222     属性装饰则是上边的装饰器装饰的晚，把下边先装饰的同名函数给替换了
[class AAA]  即内容的装饰是从下往上(内容装饰)
aaa   先构造
dell  再调用
*/

上边的变形


function testDecorator() {
    return function<T extends new (...args: any[]) => any>(constructor: T) {
      return class extends constructor {
        name = 'lee'; // 装饰后就更改了之前的name值
        getName() {
          return this.name;
        }
      };
    };
  }
  
//  变相的装饰器这样的装饰器可以有提示
const Test = testDecorator()(
class {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}
);

const test = new Test('dell');
console.log(test.getName());  // lee