当前位置： 首页 > article >正文

TypeScript装饰器 ------- 学习笔记分享

article 2025/2/19 14:50:25

目录

一. 简介

二. 类装饰器

1. 基本语法

2. 应用举例

3. 关于返回值

4. 关于构造类型

5. 替换被装饰的类

三. 装饰器工厂

四. 装饰器组合

五. 属性装饰器

1. 基本语法

2. 关于属性遮蔽

3. 应用举例

六. 方法装饰器

1. 基本语法

2. 应用举例

七. 访问器装饰器

1. 基本语法

2. 应用举例

八. 参数装饰器

1. 基本语法

2. 应用实例

一. 简介

  1. 装饰器本质是一种特殊的函数,它可以对 : 类 , 属性 , 方法 , 参数进行扩展,同时让代码更简洁

  2. 装饰器自2015年在ECMAScript中被提出到现在,已将近10年

  3. 截至目前,装饰器依然是实验性特性,需要开发者手动调整配置,来开启装饰器支持

  4. 装饰器有5种 :

    (1)类装饰器

    (2)属性装饰器

    (3)方法装饰器

    (4)访问器装饰器

    (5)参数装饰器

备注 : 虽然TypeScript5.0中可以直接使用类装饰器,但为了确保其他装饰器可用,现阶段使用时,仍建议使用experimentalDecorators配置来开启装饰器支持,而且不排除未来的版本中官方会进一步调整装饰器的相关语法 !

二. 类装饰器
1. 基本语法

类装饰器是一个应用再类声明上的函数,可以为类添加额外的功能,或添加额外的逻辑

/*
 Demo函数会在Person类定义时执行
 参数说明:
 target参数是被装饰的类,即Person
*/
function Demo(target: any) {
    console.log(target);
​
}
​
@Demo
class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}
2. 应用举例

需求 : 定义一个装饰器,实现Person实例调用toString时返回JSON.stringify的执行结果

function CustomString(target:Function){
    target.prototype.toString = function(){
        return JSON.stringify(this)
    }
    Object.seal(target.prototype)
}
​
@CustomString
class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}
const p1 = new Person('张三',18)
console.log(p1.toString())
3. 关于返回值

  • 类装饰器有返回值 : 若类装饰器返回一个新的类,那这个新类将替换掉被装饰的类

  • 类装饰器无返回值 : 若类装饰器无返回值或返回undefined,那被装饰的类不会被替换

function Demo(target: Function) {
    return class {
        test() {
            console.log(100);
            console.log(200);
            console.log(300);
        }
    }
}
​
@Demo
class Person {
    test() {
        console.log(100);
    }
}
​
console.log(Person);
4. 关于构造类型

在TypeScript中,Function类型所表示的范围十分广泛,包括 : 普通函数,箭头函数,方法等等,但并非Function类型的函数都可以被new关键字实例化,例如箭头函数是不能被实例化的,那么TypeScript中该如何声明一个构造类型呢?有以下两种方式:

  • 仅声明构造类型

/*
new表示:该类型是可以用new操作符调用
...args表示:构造器是可以接受[任意数量]的参数
any[]表示:构造器可以接受[任意类型]的参数
{}表示:返回类型是对象(非null,非undefined的对象)
*/
​
type Constructor = new (...args: any[]) => {}
//需求是fn得是一个类
function test(fn: Constructor) { }
​
class Person { }
​
test(Person)

  • 声明构造类型 + 指定静态属性

type Constructor = {
    new(...args: any[]): {}
    wife: string
}
//需求是fn得是一个类
function test(fn: Constructor) { }
​
class Person { 
    static wife:string
}
​
test(Person)
5. 替换被装饰的类

对于高级一些的装饰器,不仅仅是覆盖一个原型上的方法,还要有更多功能,例如添加新的方法和状态

需求 : 设计一个LogTime装饰器,可以给实例添加一个属性,用于记录实例对象的创建时间,再添加一个方法用于读取创建时间

type Constructor = new (...args: any[]) => {}
​
interface Person {
    getTime(): void
}
function LogTime<T extends Constructor>(target: T) {
    return class extends target {
        createdTime: Date
        constructor(...args: any[]) {
            super(...args)
            this.createdTime = new Date()
        }
        getTime() {
            return `该对象的创建时间是:${this.createdTime}`
        }
    }
}
​
​
@LogTime
class Person {
    constructor(public name: string, public age: number) {
        this.name = name
        this.age = age
    }
    speak() {
        console.log('你好呀!');
    }
}
​
const p1 = new Person('张三', 18)
console.log(p1);
console.log(p1.getTime());
三. 装饰器工厂

装饰器工厂是一个返回装饰器函数的函数,可以为装饰器添加参数,可以更灵活地控制装饰器的行为

需求 : 定义一个LogInfo类装饰器工厂,实现Person实例可以调用到introduce方法,且introduce中输出内容的次数,由LogInfo接收的参数决定

interface Person{
    introduce():void
}
​
function LogInfo(n:number) {
    return function(target:Function){
        target.prototype.introduce = function(){
           for(let i = 0;i < n;i++){
                console.log(`我的名字:${this.name},我的年龄:${this.age}`);
           }
        }
    }//装饰器
}//装饰器工厂
​
​
@LogInfo(3)
class Person {
    constructor(
        public name: string,
        public age: number
    ) { }
    speak() {
        console.log('你好呀!');
    }
}
​
const p1 = new Person('张三',18)
p1.introduce()
四. 装饰器组合

装饰器可以组合使用,执行顺序为:先[由上到下]的执行所有的装饰器工厂,依次获取到装饰器,然后再[由下到上]执行所有的装饰器

  • 装饰器组合的执行顺序

//装饰器
function test1(target:Function) {
    console.log('test1');
}
​
//装饰器工厂
function test2() {
    console.log('test2工厂');
    return function (target:Function) {
        console.log('test2');
    }
}
​
//装饰器工厂 
function test3() {
    console.log('test3工厂');
    return function (target:Function) {
        console.log('test3');
    }
}
​
//装饰器
function test4(target:Function) {
    console.log('test4');
}
​
@test1
@test2()
@test3()
@test4
class Person{}

  • 装饰器组合的应用

interface Person {
    introduce(): void
    getTime(): void
}
function CustomString(target: Function) {
    //使用装饰器重写toString方法 + 封闭其原型对象
    target.prototype.toString = function () {
        return JSON.stringify(this)
    }
    Object.seal(target.prototype)
}//装饰器
​
function LogInfo(n: number) {
    //装饰器函数:target是被装饰的类
    return function (target: Function) {
        target.prototype.introduce = function () {
            for (let i = 0; i < n; i++) {
                console.log(`我的名字:${this.name},我的年龄:${this.age}`);
            }
        }
    }//装饰器
}//装饰器工厂
​
type Constructor = new (...args: any[]) => {}
function LogTime<T extends Constructor>(target: T) {
    return class extends target {
        createdTime: Date
        constructor(...args: any[]) {
            super(...args)
            this.createdTime = new Date()
        }
        getTime() {
            return `该对象的创建时间是:${this.createdTime}`
        }
    }
}//装饰器
​
@CustomString
@LogInfo(5)
@LogTime
class Person {
    constructor(
        public name: string,
        public age: number
    ) { }
    speak() {
        console.log('你好呀!');
    }
}
​
const p1 = new Person('张三', 18)
p1.speak()
console.log(p1.toString());
p1.introduce()
console.log(p1.getTime());

五. 属性装饰器
1. 基本语法
function Demo(target:object,propertyKey:string){
    console.log(target,propertyKey) ;
}
​
/*
    参数说明:
        target : 对于静态属性来说值是类,对于实例属性来说值是类的原型对象{}
        propertyKey : 属性名
*/
​
class Person {
    @Demo name: string
    @Demo age: number
    @Demo static school: string
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}

2. 关于属性遮蔽

如下代码中 : 当构造器中的this.age = age试图在实例上赋值时,实际上时调用了原型上age属性的set方法

class Person {
    name: string
    age: number
    static school: string
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}
​
let value = 130
Object.defineProperty(Person.prototype, 'age', {
    get() {
        return value
    },
    set(val) {
        value = val
    },
})
​
const p1 = new Person('张三', 18)
console.log(p1.age);//18
console.log(Person.prototype.age);//18
3. 应用举例

需求 : 定义一个State属性装饰器,来监视属性的修改

function State(target: object, propertyKey: string) {
    let key = `__${propertyKey}`
    Object.defineProperty(target, propertyKey, {
        get() {
            return this[key]
        },
        set(newValue) {
            console.log(`${propertyKey}的最新值为:${newValue}`);
            this[key] = newValue
        },
        //还可以加上两个配置项
        enumerable: true,//可枚举性
        configurable: true,//可配置性
    })
}
​
class Person {
    name: string
    @State age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}
​
const p1 = new Person('张三', 18)
六. 方法装饰器
1. 基本语法
/*
    参数说明:
    target:对于静态方法来说值是类,对于实例方法来说值是原型对象
    propertyKey:方法的名称
    descriptor:方法的描述对象,其中value属性是被装饰的方法
*/
​
​
function Demo(target:object,propertyKey:string,descriptor:PropertyDescriptor){
     console.log(target);
     console.log(propertyKey);
     console.log(descriptor);
}
​
class Person {
    constructor(
        public name: string,
        public age: number,
    ) { }
    @Demo
    speak() {//实例方法
        console.log(`你好,我的名字:${this.name},我的年龄:${this.age}`);
    }
    @Demo
    static isAdult(age: number) {//静态方法
        return age >= 18;
    }
} 
​
const p1 = new Person('张三',18)
p1.speak()
2. 应用举例

定义一个Logger方法装饰器,用于在方法执行前和执行后,均追加一些额外逻辑

function Logger(target:object,propertyKey:string,descriptor:PropertyDescriptor){
    //存储原始方法
    const originnal = descriptor.value
    //替换原始方法
    descriptor.value = function(...args:any[]){
        console.log(`${propertyKey}开始执行......`);
        const result = originnal.call(this,...args) 
        console.log(`${propertyKey}执行完毕......`);
        return result
    }
​
}
​
class Person {
    constructor(
        public name: string,
        public age: number,
    ) { }
    @Logger speak(str:string) {//实例方法
        console.log(`你好,我的名字:${this.name},我的年龄:${this.age},${str}`);
    }
    static isAdult(age: number) {//静态方法
        return age >= 18;
    }
} 
​
const p1 = new Person('tom',18)
p1.speak('hello')

定义一个Validate方法装饰器,用于验证数据

function Logger(target:object,propertyKey:string,descriptor:PropertyDescriptor){
    //存储原始方法
    const originnal = descriptor.value
    //替换原始方法
    descriptor.value = function(...args:any[]){
        console.log(`${propertyKey}开始执行......`);
        const result = originnal.call(this,...args) 
        console.log(`${propertyKey}执行完毕......`);
        return result
    }
​
}
​
function Validate(maxValue:number){
    return function(target:object,propertyKey:string,descriptor:PropertyDescriptor){
        //保存原始方法
        const originnal = descriptor.value
        //替换原始方法
        descriptor.value = function(...args:any[]){
            //自定义的验证逻辑
            if(args[0] > maxValue){
                throw new Error('年龄非法')
            }
            //如果所有参数都符合要求,则使用原始方法
            return originnal.apply(this,args)
        }
    }
}
​
class Person {
    constructor(
        public name: string,
        public age: number,
    ) { }
    @Logger speak(str:string) {//实例方法
        console.log(`你好,我的名字:${this.name},我的年龄:${this.age},${str}`);
    }
    @Validate(120)
    static isAdult(age: number) {//静态方法
        return age >= 18;
    }
} 
​
const p1 = new Person('tom',18)
p1.speak('hello')
console.log(Person.isAdult(100));
七. 访问器装饰器
1. 基本语法
/*
    参数说明
        target:
            1.对于实例访问器来说是[所属类的原型对象]
            2.对于静态访问器来说值是[所属类]
        propertyKey:访问器名称
        descriptor:描述对象
*/
function Demo(target: object, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(target);
    console.log(propertyKey);
    console.log(descriptor);
}
​
class Person {
    @Demo
    get address() {
        return '涩谷'
    }//实例访问器
    @Demo
    static get country() {
        return 'Japan'
    }//静态访问器
}
2. 应用举例

需求 : 对Weather类的temp属性的set访问器进行限制,设置的最低温度-50,最高温度50

function RangeValidate(min:number,max:number){
    return function(target:object,propertyKey:string,descriptor:PropertyDescriptor){
        //保存原始的setter
        const originalSetter = descriptor.set
        //重写setter
        descriptor.set = function(value:number){
            //检查设置的值是否在指定的最小值和最大值之间
            if(value < min||value > max){
                //如果值不在范围内,抛出错误
                throw new Error(`${propertyKey}的值应该在${min}到${max}之间`);
            }
            //如果值在范围内,且原始setter方法存在,则调用原始setter方法
            if(originalSetter){
                originalSetter.call(this,value);
            }
        }
    }
}
​
class Weather {
    private _temp: number;
    constructor(_temp:number) {
        this._temp = _temp;
    }
    @RangeValidate(-50,50)
    set temp(value) {
        this._temp = value;
    }
    get temp() {
        return this._temp;
    }
}
​
const w1 = new Weather(28)
w1.temp = 9000
console.log(w1);

八. 参数装饰器
1. 基本语法
/*
    参数说明:
        target:
            1.如果修饰的是[实例方法]的参数,target是类的[原型对象]
            2.如果修饰的是[静态方法]的参数,target是[类]
        propertyKey:参数所在的方法的名称
        parameterIndex:参数在函数参数列表中的索引,从0开始
*/
function Demo(target: object, propertyKey: string, parameterIndex: number) {
    console.log(target);
    console.log(propertyKey);
    console.log(parameterIndex);
}
​
//类定义
class Person {
    constructor(public name: string) { }
    speak(@Demo message1: any, message2: any) {
        console.log(`${this.name}想对你说:${message1},${message2}`);
    }
}
2. 应用实例

需求 : 定义方法装饰器Validate,同时搭配参数装饰器NotNumber,来对speak方法的参数类型进行限制

function NotNumber(target: any, propertyKey: string, parameterIndex: number) {
    // 初始化或获取当前方法的参数索引列表
    let notNumberArr: number[] = target[`__notNumber_${propertyKey}`] || [];
    // 将当前参数索引添加到列表中
    notNumberArr.push(parameterIndex);
    // 将列表存储回目标对象
    target[`__notNumber_${propertyKey}`] = notNumberArr;
  }
  
  // 方法装饰器定义
  function Validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const method = descriptor.value;
    descriptor.value = function (...args: any[]) {
      // 获取被标记为不能为空的参数索引列表
      const notNumberArr: number[] = target[`__notNumber_${propertyKey}`] || [];
      // 检查参数是否为 null 或 undefined
      for (const index of notNumberArr) {
        if (typeof args[index] === 'number') {
          throw new Error(`方法 ${propertyKey} 中索引为 ${index} 的参数不能是数字！`)
        }
      }
      // 调用原始方法
      return method.apply(this, args);
    };
  
    return descriptor;
  }
  
  // 类定义
  class Student {
    name: string;
    constructor(name: string) {
      this.name = name;
    }
    @Validate
    speak(@NotNumber message1: any, message2: any) {
      console.log(`${this.name}想对说：${message1}，${message2}`);
    }
  }
  
  // 使用
  const s1 = new Student("张三");
  s1.speak(100, 200);


http://www.kler.cn/a/547056.html

相关文章：

  • DeepSeek 模型部署与使用技术评测（基于阿里云零门槛解决方案）
  • 部署onlyoffice后，php版的callback及小魔改（logo和关于）
  • Java项目引入DeepSeek搭建私有AI
  • React历代主要更新
  • 使用EVE-NG-锐捷实现NAT
  • 尚硅谷爬虫note003
  • 微软AutoGen介绍——Managing State保存并加载持续会话的Agents和Teams
  • ML.NET库学习006：成人人口普查数据分析与分类预测
  • 第十一篇：EMC的“电磁护盾”——三电系统干扰抑制实战
  • uniapp中对于文件和文件夹的处理，内存的查询
  • 132，【1】 buuctf web [EIS 2019]EzPOP
  • Scrapy：任务队列底层设计详解
  • Unity 接入Tripo API 文生模型，模型制作动画并下载使用
  • 提供可传递的易受攻击的依赖项
  • 最新国内 ChatGPT Plus/Pro 获取教程
  • 【STM32】舵机SG90
  • 使用Java爬虫获取京东JD.item_sku API接口数据
  • 【Jenkins流水线搭建】
  • LLaMA-Factory 安装linux部署使用conda笔记
  • 安科瑞 EMS3.0：赋能企业能效管理，开启智慧能源新时代