TypeScript系列教程十一《装饰器》 -- 属性装饰器

2022-05-06 17:20:54 浏览数 (1)

系列教程

  • TypeScript系列教程一《开篇》
  • TypeScript系列教程二《安装起步》
  • TypeScript系列教程三《基础类型》
  • TypeScript系列教程四《扩展类型》
  • TypeScript系列教程五《对象类型》》
  • TypeScript系列教程六《泛型》
  • TypeScript系列教程七《接口》
  • TypeScript系列教程八《类》
  • TypeScript系列教程九《高级类型》
  • TypeScript系列教程九《类型转换》-- keyof和typeof 操作
  • TypeScript系列教程九《类型转换》-- 索引访问类型
  • TypeScript系列教程九《类型转换》-- 条件类型
  • TypeScript系列教程九《类型转换》-- 映射类型
  • TypeScript系列教程九《类型转换》-- 条件类型
  • TypeScript系列教程九《类型转换》-- 模板文本类型
  • TypeScript系列教程十《模块》
  • TypeScript系列教程十一《装饰器》 – 装饰器与继承
  • TypeScript系列教程十一《装饰器》 – 类装饰器
  • TypeScript系列教程十一《装饰器》 – 方法装饰器
  • TypeScript系列教程十一《装饰器》 – reflect-metadata
  • TypeScript系列教程十一《装饰器》 – 属性装饰器
  • TypeScript系列教程十一《装饰器》 – 参数装饰器

属性装饰器和其他装饰器功能类似，其设计也是为了统一的、复用度更高的去监听，改变属性。

属性装饰器声明在一个属性声明之前（紧靠着属性声明）。 属性装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里。 属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

  • 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  • 成员的名字。 注意  属性描述符不会做为参数传入属性装饰器，这与TypeScript是如何初始化属性装饰器的有关。 因为目前没有办法在定义一个原型对象的成员时描述一个实例属性，并且没办法监视或修改一个属性的初始化方法。返回值也会被忽略。因此，属性描述符只能用来监视类中是否声明了某个名字的属性。

下面记录三个例子来具体体现 场景。

基础例子

代码目的：

拦截实例属性，处理加工，输出修改后的属性。例如输入艾希 得到 寒冰射手艾希

代码实现：

代码语言：javascript复制
const nameDecorate:PropertyDecorator = (target: Object, propertyKey: string | symbol)=>{
  let value:string
  Object.defineProperty(target,propertyKey,{
    set:(v)=>{
      value = v
    },
    get:()=>{
      return '寒冰射手' value
    }
  })
}

class Hero {
  @nameDecorate
  name:string
}

let hb = new Hero()
hb.name = '艾希'
console.log(hb.name);

打印结果：

工厂例子

属性装饰器函数工厂实现

代码目的：

根据工厂装饰器key,返回json，在网络请求的时候经常会占用关键字，根据工厂装饰器key确定json 属性最终名称。

代码实现：

代码语言：javascript复制
let json:{} = {}

const modelToJsonKey:(jsonKey:string)=>PropertyDecorator = (jsonKey)=>{
  return (target:Object,pkey:string)=>{
    Object.defineProperty(target,pkey,{
      set:(v)=>{
        json[jsonKey] = v
      }
    })
  }
}
class TestMdoel {
  @modelToJsonKey('title')
  name:string
  @modelToJsonKey('ID')
  id:string

  constructor(name:string,id:string){
    this.name = name
    this.id = id
  }
}
 let modell = new TestMdoel('zhangsan','881')
console.log(json);

控制台输出：

代码语言：javascript复制
 zhangyu@zhangyudeMacBook-Pro  ~/Desktop/study/ts/js2ts-project  ts-node propteryDecorate.ts
{ title: 'zhangsan', ID: '881' }

搭配reflect-metadata 不破坏结构存储

这是来自于官网的示例，中文档运行不通，我按照官网思想写了一遍。

代码目的：

通过属性装饰器格式，来格式化属性文字

代码实现：

代码语言：javascript复制
import "reflect-metadata";

const format:(formatter:string)=>PropertyDecorator = (formatter)=>{
  return (target: Object, propertyKey: string | symbol) => {
    Reflect.defineMetadata(propertyKey,formatter,target) 
  }
}

class Greeter {
  @format("Hello, %s")
  greeting: string;

  constructor(message: string) {
      this.greeting = message;
  }

  greet(){
    let format = Reflect.getMetadata("greeting",this)
    format = format.replace("%s",this.greeting)
    console.log(format);
  }
}

let greeter =  new Greeter('属性装饰器')
greeter.greet()

打印结果：

typescript json html

0 人点赞