TypeScript-类装饰器和TypeScript-defineProperty

简介: TypeScript-类装饰器和TypeScript-defineProperty

前言


TypeScript的类装饰器是一种强大的功能,它允许开发者在类声明前应用装饰器函数,以自定义类的行为和属性。这些装饰器可以用于各种用途,如添加元数据、修改类的原型或行为,或者执行某些操作。通过类装饰器,开发者可以更灵活地扩展和定制类,提高了代码的可维护性和可读性。这个功能在TypeScript中广泛用于框架和库的开发,以及在实际应用中,帮助开发者实现更高级的功能和模式。



类装饰器


类装饰器在类声明之前绑定(紧靠着类声明) 类装饰器可以用来监视,修改或替换类的定义 在执行类装饰器函数的时候, 会把绑定的类作为其唯一的参数传递给装饰器

function test(target: any) {
    console.log(target);
    target.prototype.personName = 'yangbuyiya';
    target.prototype.say = (): void => {
        console.log(`my name is ${target.prototype.personName}`);
    }
}
@test
class Person {
}
interface Person {
    say(): void;
}
let p = new Person();
p.say();


如果类装饰器返回一个新的类,它会将新的类来替换原有类的定义

function test<T extends { new(...args: any[]): {} }>(target: T) {
    return class extends target {
        name: string = 'yangbuyiya';
        age: number = 18;
    }
}
@test
class Person {
}
let p = new Person();
console.log(p);




defineProperty


什么是 defineProperty

TypeScript的Object.defineProperty是一种用于在对象上定义属性的方法。它允许开发者以精确的方式定义属性的特性,如可枚举性、可配置性和可写性。这对于创建高度可控的对象属性非常有用,尤其在涉及数据封装和对象安全性的情况下。在TypeScript中,Object.defineProperty可用于创建getter和setter方法,从而实现属性的自定义行为。这一功能通常用于实现数据访问和保护,确保对象的属性在外部被正确使用和维护。通过Object.defineProperty,开发者可以更精细地管理对象属性,提高代码的可维护性和安全性。


Object.defineProperty() MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty可以直接在一个对象上定义一个新属性 或者修改一个对象的现有属性,并返回此对象




定义一个新的属性

let obj = {age: 18};
Object.defineProperty(obj, 'name', {
    value: 'yangbuyiya'
});
console.log(obj);




修改原有属性

let obj = {age: 18};
Object.defineProperty(obj, 'age', {
    value: 34
});
console.log(obj);




修改属性配置-读写

let obj = {age: 18};
Object.defineProperty(obj, 'age', {
    writable: false
})
obj.age = 34;
console.log(obj.age);




修改属性配置-迭代

let obj = {age: 18, name: 'yangbuyiya'};
Object.defineProperty(obj, 'name', {
    enumerable: false
})
for (let key in obj) {
    console.log(key);
}




修改属性配置-配置


如果你在配置之前想让所有的属性都出现在迭代当中,然后后面又不想让其全部出现了那么这个时候在通过 enumerable、configurable = true 改变是没有作用的:

let obj = {age: 18, name: 'yangbuyiya'};
Object.defineProperty(obj, 'name', {
    enumerable: false,
    configurable: true
});
Object.defineProperty(obj, 'name', {
    enumerable: true,
    configurable: true
});
for (let key in obj) {
    console.log(key);
}

在之前是什么样子了就不能再次去进行配置了。




最后

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

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

相关文章
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
TypeScript中装饰器的概念与使用场景
【4月更文挑战第23天】TypeScript的装饰器是特殊声明,用于附加到类的声明、方法、属性或参数,以修改行为。它们以`@expression`形式,其中`expression`是运行时调用的函数。装饰器应用场景包括:日志记录、调试、依赖注入、权限控制和AOP。通过装饰器,可以实现动态行为修改,如添加日志、注入依赖、控制权限以及事务管理。然而,应谨慎使用,避免过度复杂化代码。装饰器在现代 TypeScript 开发中扮演重要角色,帮助编写更健壮、可维护的代码。
|
1天前
|
JavaScript 前端开发 安全
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
|
1天前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
1天前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript中的装饰器与元编程
【4月更文挑战第30天】TypeScript的装饰器是元编程工具,用于修改类、方法等行为。它们允许实现日志、权限控制、缓存等功能,支持类装饰器、方法装饰器等多种类型。装饰器借助JavaScript的Proxy和Reflection API实现,但过度使用可能造成复杂性。正确运用能提升代码质量,但需注意类型安全和维护性。
|
1天前
|
JavaScript
类和继承在TypeScript中的使用详解
【4月更文挑战第23天】TypeScript中的类和继承详解:使用`class`定义类,包含属性和方法,如`Animal`示例。通过`extends`实现继承,如`Dog`继承`Animal`,可重写父类方法。使用访问修饰符`public`、`protected`、`private`控制成员可见性。抽象类和抽象方法用于定义基类和强制子类实现特定方法,提升代码组织和可维护性。
|
1天前
react+typescript装饰器写法报错的解决办法
react+typescript装饰器写法报错的解决办法
24 1
|
1天前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
46 0
|
1天前
|
存储 JavaScript 前端开发
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
58 0
|
1天前
|
存储 设计模式 JavaScript
TypeScript 类的基础:从定义到实例化,让你快速掌握(三)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
1天前
|
存储 JavaScript
TypeScript 类的基础:从定义到实例化,让你快速掌握(二)
TypeScript 类的基础:从定义到实例化,让你快速掌握