TypeScript-方法装饰器

简介: TypeScript-方法装饰器

方法装饰器


方法装饰器写在,在一个方法的声明之前(紧靠着方法声明) 方法装饰器可以用来监视,修改或者替换方法定义

方法装饰器表达式会在运行时当中函数会被调用,会自动传入下列 3 个参数给方法装饰器:


  • 对于静态方法而言就是当前的类, 对于实例方法而言就是当前的实例

实例方法:

function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(target);
    console.log(propertyKey);
    console.log(descriptor);
}
class Person {
    @test
    sayName(): void {
        console.log('my name is yangbuyiya');
    }
    sayAge(): void {
        console.log('my age is 34');
    }
    static say(): void {
        console.log('say hello world');
    }
}

静态方法:

function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(target);
    console.log(propertyKey);
    console.log(descriptor);
}
class Person {
    sayName(): void {
        console.log('my name is yangbuyiya');
    }
    sayAge(): void {
        console.log('my age is 34');
    }
    @test
    static say(): void {
        console.log('say hello world');
    }
}


  • 被绑定方法的名字
  • 被绑定方法的属性描述符

剩下的两个参数就不详细的介绍了,接下来看几个案例即可,第一个就是将装饰了方法修饰器的方法在迭代遍历的时候不进行遍历代码实现如下:

function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.enumerable = false;
}
class Person {
    sayName(): void {
        console.log('my name is yangbuyiya');
    }
    @test
    sayAge(): void {
        console.log('my age is 34');
    }
    static say(): void {
        console.log('say hello world');
    }
}
let p = new Person();
for (let key in p) {
    console.log(key);
}


第二个案例就比较高级,就是如上所说的替换旧方法的定义返回一个新的方法定义:

function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.value = (): void => {
        console.log('my name is yangbuyiya');
    };
}
class Person {
    @test
    sayName(): void {
        console.log('my name is Person');
    }
}
let p = new Person();
p.sayName();




最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
TypeScript中装饰器的概念与使用场景
【4月更文挑战第23天】TypeScript的装饰器是特殊声明,用于附加到类的声明、方法、属性或参数,以修改行为。它们以`@expression`形式,其中`expression`是运行时调用的函数。装饰器应用场景包括:日志记录、调试、依赖注入、权限控制和AOP。通过装饰器,可以实现动态行为修改,如添加日志、注入依赖、控制权限以及事务管理。然而,应谨慎使用,避免过度复杂化代码。装饰器在现代 TypeScript 开发中扮演重要角色,帮助编写更健壮、可维护的代码。
|
4月前
|
存储 JavaScript 前端开发
TypeScript 5.2 beta 浅析:新的关键字 using 与新版装饰器元数据
TypeScript 5.2 beta 浅析:新的关键字 using 与新版装饰器元数据
|
6月前
|
JavaScript 安全 数据安全/隐私保护
TypeScript-属性装饰器
TypeScript-属性装饰器
29 0
|
1月前
react+typescript装饰器写法报错的解决办法
react+typescript装饰器写法报错的解决办法
23 1
|
3月前
|
存储 JavaScript 前端开发
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
53 0
|
3月前
|
JavaScript
如何使用 TypeScript 创建和使用装饰器
如何使用 TypeScript 创建和使用装饰器
17 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
TypeScript进阶(二)深入理解装饰器
TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的超集,为 JavaScript 添加了静态类型检查和其他一些特性。装饰器是 TypeScript 中一个非常强大的特性,它可以用来修改类、方法、属性等的行为。本文将深入探讨 TypeScript 装饰器的原理和用法。
42 0
|
6月前
|
JavaScript 前端开发
带你读《现代TypeScript高级教程》十五、装饰器与反射元数据(1)
带你读《现代TypeScript高级教程》十五、装饰器与反射元数据(1)
|
6月前
|
JavaScript API
带你读《现代TypeScript高级教程》十五、装饰器与反射元数据(2)
带你读《现代TypeScript高级教程》十五、装饰器与反射元数据(2)
|
6月前
|
JavaScript 开发者 索引
TypeScript-参数装饰器
TypeScript-参数装饰器
30 0