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();




最后

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

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

相关文章
|
10月前
|
JavaScript 前端开发 数据安全/隐私保护
TypeScript中装饰器的概念与使用场景
【4月更文挑战第23天】TypeScript的装饰器是特殊声明,用于附加到类的声明、方法、属性或参数,以修改行为。它们以`@expression`形式,其中`expression`是运行时调用的函数。装饰器应用场景包括:日志记录、调试、依赖注入、权限控制和AOP。通过装饰器,可以实现动态行为修改,如添加日志、注入依赖、控制权限以及事务管理。然而,应谨慎使用,避免过度复杂化代码。装饰器在现代 TypeScript 开发中扮演重要角色,帮助编写更健壮、可维护的代码。
|
10月前
|
存储 JavaScript 前端开发
TypeScript 5.2 beta 浅析:新的关键字 using 与新版装饰器元数据
TypeScript 5.2 beta 浅析:新的关键字 using 与新版装饰器元数据
149 0
|
18天前
|
JavaScript 前端开发
TypeScript 定义同步方法
本文详细介绍了在TypeScript中定义同步方法的多种方式,包括使用类、接口、泛型和复杂的数据操作示例。通过理解这些方法,你可以在实际项目中有效地组织和管理你的代码,提高代码的可读性和维护性。
42 19
|
4月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
90 6
|
4月前
|
JavaScript 安全 编译器
TypeScript 与 Jest 测试框架的结合使用,从 TypeScript 的测试需求出发,介绍了 Jest 的特点及其与 TypeScript 结合的优势,详细讲解了基本测试步骤、常见测试场景及异步操作测试方法
本文深入探讨了 TypeScript 与 Jest 测试框架的结合使用,从 TypeScript 的测试需求出发,介绍了 Jest 的特点及其与 TypeScript 结合的优势,详细讲解了基本测试步骤、常见测试场景及异步操作测试方法,并通过实际案例展示了其在项目中的应用效果,旨在提升代码质量和开发效率。
94 6
|
8月前
|
JavaScript 前端开发 索引
TypeScript(八)装饰器
TypeScript(八)装饰器
54 0
|
9月前
|
JavaScript 监控 编译器
29.【TypeScript 教程】装饰器(Decorator)
29.【TypeScript 教程】装饰器(Decorator)
81 0
|
10月前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript中的装饰器与元编程
【4月更文挑战第30天】TypeScript的装饰器是元编程工具,用于修改类、方法等行为。它们允许实现日志、权限控制、缓存等功能,支持类装饰器、方法装饰器等多种类型。装饰器借助JavaScript的Proxy和Reflection API实现,但过度使用可能造成复杂性。正确运用能提升代码质量,但需注意类型安全和维护性。
140 0
|
10月前
react+typescript装饰器写法报错的解决办法
react+typescript装饰器写法报错的解决办法
126 1
|
10月前
|
存储 JavaScript 前端开发
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
114 0