TypeScript ---- 装饰器

47 阅读2分钟

装饰器

定义: TypeScript装饰器(Decorator)是种特殊类型声明,通过添加附加到类、方法、属性或参数上,修改其行为或添加元数据(附加到代码结构(类、方法、属性等)上的键值对信息,不直接影响代码逻辑,可用于运行时解析或增强行为),从而对类型进行扩展。

装饰器分类

装饰器分为四种类型:类装饰器、方法装饰器、属性装饰器、参数装饰器

1、类装饰器

类装饰器应用于类构造函数的函数。接收一个参数,即被修饰的类构造函数,可以在不修改原始类定义的情况下扩展或修改该类。

function logClass(target:any){
  console.log()target)
}

@logClass

class MyClass{
// ...
}

2、方法装饰器

方法装饰器应用于方法定义的函数,接收三个参数:被装饰的类的原型、方法的名称和方法的属性描述符。防范装饰器可以用来修改方法的行为,例如添加日志、验证等

function logMethod(target:any,methodName:string,descriptor:PropertyDescriptor){
  console.log(target,methodName,descriptor)
}

class MyCalss {
  @logMethod
   myMethod(){
   // ...
  }
}

3、属性装饰器

属性装饰器应用于属性声明的函数。接收两个参数:被修饰的类的原型和属性名称。属性装饰器用来修改属性的行为,例如添加 验证、计算等

function logProperty(target:any,prtpertyName:string){
  console.log(target,prtpertyName)
}

class MyCalss {
  @logProperty
  logProperty: string
}

4、参数装饰器

参数装饰器应用于函数参数声明的函数。接收三个参数:被修饰的类的原型、方法名称和参数索引。参数装饰器用来修改函数参数的行为,例如添加验证、转换等。

function logParameter(target:any,methodName:string,prtpertyIndex:number){
  console.log(target,prtpertyName,prtpertyIndex)
}

class MyCalss {
  myMethod(@logParameter param1:string){
   // ...
  }
}

React 函数组件不推荐使用装饰器,因为React的函数组件和Hooks已经提供了足够的功能来替代大部分装饰器的使用场景。