TS 装饰器

丶观海听涛丶

已于 2022-04-15 09:35:16 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ⭐️ typescript 文章标签： typescript

于 2022-04-14 18:02:42 首次发布

本文链接：https://blog.csdn.net/qq_40963664/article/details/124177551

⭐️ typescript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JavaScript中的类装饰器和方法装饰器的概念，包括它们在TypeScript中的实现和用法。类装饰器允许在运行时修改或监控类的定义，而方法装饰器则在调用方法时执行代码。通过装饰器，开发者可以实现元编程，增强代码的功能和可维护性。示例展示了如何定义和应用装饰器，以及装饰器在实际类和方法上的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

类装饰器:

装饰器装饰方法

介绍

随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。 Javascript里的装饰器目前处在建议征集的第二阶段，但在TypeScript里已做为一项实验性特性予以支持。

注意装饰器是一项实验性特性，在未来的版本中可能会发生改变

若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

格式：

@函数名称（）

类装饰器:

1.类装饰器在类声明之前被声明（紧靠着类声明）。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。类装饰器不能用在声明文件中( .d.ts)，也不能用在任何外部上下文中（比如declare的类）。

2.类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。

简单理解：

1.紧靠着类声明

2.参数：类的构造函数

装饰器可以装饰整个类，当是装饰类的时候，我们new一个对象,会执行装饰器里面的代码


@controller
class LoginController {
   login() {
    
   }
}

function controller(target: any) {
  // 可以打印出 login 属性
  console.log(target.prototype)
}

controller方法是上个文件中 LoginController类的装饰器

参数 target 指的是 LoginController 构造函数

装饰器装饰方法

装饰器装饰方法：当方法被调用的时候，不会指定函数体代码，而是执行装饰器里面的代码。函数装饰器包含三个参数。第一个target 表示源对象及 a对象，第二个参数表示属性的名称：test,第三个参数表示属性的可操作性，比如write(可写)，value:属性的值，....类型为PropertyDescriptor

function f(){
    console.log("f meth");
    return function(target:any,propertyKey:string,descriptor:PropertyDescriptor):void{
        let value = descriptor.value;
        console.log("propertyKey:" +propertyKey);
        console.log("target:",target[propertyKey](1,2,3));
        
        // descriptor.value = function(){
        //     // console.log("f() call",value)
        //     value.call(this,...arguments);
        // }
       
    }
}
    class A {
        @f()
        test(...data:any):void{
            console.log(data)
        }
    }
    let a :A  = new A();
    a.test(1,"2",3)