TypeScript-属性装饰器

简介: TypeScript-属性装饰器

前言


TypeScript中的属性装饰器是一项有力的特性,允许开发者在类的属性上应用装饰器函数,以自定义属性的行为和元数据。这为开发者提供了更多的控制权和灵活性,以满足各种需求。


属性装饰器的主要应用之一是添加元数据。通过装饰器,您可以为属性附加信息,例如验证规则、默认值或其他自定义配置。这种元数据对于文档生成、类型检查和运行时行为非常有用。


另一个属性装饰器的常见用途是改变属性的访问行为。您可以使用装饰器来创建 getter 和 setter 方法,以实现对属性的更复杂的控制逻辑。这对于数据验证、权限控制和数据转换非常有帮助。


属性装饰器还广泛用于框架和库的开发中,以实现各种功能,例如数据绑定、序列化和反序列化,以及状态管理。

总之,TypeScript中的属性装饰器是一个强大的工具,可以帮助开发者增强属性的功能和可维护性,使代码更加灵活和可扩展。它为类型安全和高级特性提供了更多的可能性,使得 TypeScript 成为现代应用程序开发的首选语言之一。




属性装饰器概述


属性装饰器写在一个属性声明之前(紧靠着属性声明)

属性装饰器表达式会在运行时当作函数被调用,会自动传入下列 2 个参数:


  • 对于静态属性来说就是当前的类, 对于实例属性来说就是当前实例
  • 成员的名字

实例属性:

function test(target: any, proptyName: string) {
    console.log(target);
    console.log(proptyName);
}
class Person {
    static age: number;
    @test
    name?: string;
}

静态属性:

function test(target: any, proptyName: string) {
    console.log(target);
    console.log(proptyName);
}
class Person {
    @test
    static age: number;
    name?: string;
}



那么现在你就可以在属性装饰器当中做你想做的事情了比如说,我想在创建对象的时候给 name 属性初始化一个值如下:

function test(target: any, proptyName: string) {
    target[proptyName] = "yangbuyiya";
}
class Person {
    static age: number;
    @test
    name?: string;
}
let p = new Person();
console.log(p);



最后

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

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

相关文章
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
TypeScript中装饰器的概念与使用场景
【4月更文挑战第23天】TypeScript的装饰器是特殊声明,用于附加到类的声明、方法、属性或参数,以修改行为。它们以`@expression`形式,其中`expression`是运行时调用的函数。装饰器应用场景包括:日志记录、调试、依赖注入、权限控制和AOP。通过装饰器,可以实现动态行为修改,如添加日志、注入依赖、控制权限以及事务管理。然而,应谨慎使用,避免过度复杂化代码。装饰器在现代 TypeScript 开发中扮演重要角色,帮助编写更健壮、可维护的代码。
|
6月前
|
JavaScript 前端开发 编译器
TypeScript 类 第二章 【参数属性,存取器,静态属性】
TypeScript 类 第二章 【参数属性,存取器,静态属性】
66 2
|
6月前
|
存储 JavaScript 前端开发
TypeScript 5.2 beta 浅析:新的关键字 using 与新版装饰器元数据
TypeScript 5.2 beta 浅析:新的关键字 using 与新版装饰器元数据
109 0
|
6月前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
65 0
|
3月前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
6月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
225 0
|
4月前
|
JavaScript 前端开发 索引
TypeScript(八)装饰器
TypeScript(八)装饰器
31 0
|
5月前
|
JavaScript 前端开发 C++
typescript 只读属性
typescript 只读属性
|
5月前
|
JavaScript 监控 编译器
29.【TypeScript 教程】装饰器(Decorator)
29.【TypeScript 教程】装饰器(Decorator)
48 0
|
6月前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript中的装饰器与元编程
【4月更文挑战第30天】TypeScript的装饰器是元编程工具,用于修改类、方法等行为。它们允许实现日志、权限控制、缓存等功能,支持类装饰器、方法装饰器等多种类型。装饰器借助JavaScript的Proxy和Reflection API实现,但过度使用可能造成复杂性。正确运用能提升代码质量,但需注意类型安全和维护性。
96 0