重拾Typescript之方法和访问器装饰器

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

什么是真的学会，通俗点说就是不用过脑子，习惯成自然，比如用筷子的时候，而不是现在脑子回想起来筷子应该怎么用...我想这才是真的学会吧。

这篇主要是针对于TypeScript的方法的装饰器和访问器的装饰器

1.方法的装饰器

之前的篇幅中，涉及到的类的装饰器，接收的参数是类的构造函数；

方法的装饰器，可以接收3个参数，依次如下:

• target：target参数按照装饰的方式是普通方法或者静态方法又分为2种

  • 装饰的是普通方法:target对应的是prototype原型；
  • 装饰的是静态方法:target对应的是类的构造函数

• key:参数key代表着属性名

• ``descriptor:属性描述符，这个就是Object.defineProperty`中的类似

  • 属性值1:value--设置属性默认值
  • 属性值2:writable--设置属性是否能够修改
  • 属性值3:enumerable--设置属性是否可以枚举，即是否允许遍历
  • 属性值4:configurable--设置属性是否可以删除或者编辑

装饰器分别装饰普通方法和静态方法的例子:

function funcDecorator(target:any,key:string,){
  //装饰的是普通方法，target对应的是prototype； 装饰的是静态方法时，target对应的是类的构造函数
  // key能够获取到属名字
  console.log(target,key)
}
class Cart{
  name:string;
  constructor(name:string){
    this.name = name;
  }
  @funcDecorator
  getName(){
    return this.name;
  }
  @funcDecorator
  static getNumString(){
    return '15号'
  }
}

运行结果如下:

接着来看下第3个参数--descriptor的例子:

代码中通过kid.getName = ()=>...对getName进行了重写，但是在装饰器中，存在descriptor.writable = false---就是🈲重写，从而报错

function funcDecorator1(target:any,key:string,descriptor:PropertyDescriptor){
  //这里可以设置被装饰的对象--这里设置了不可重写，那么下面的getName方法就不能够被重写了
  descriptor.writable = false;
  console.log(target,key,)
}
class Kid{
  name:string;
  constructor(name:string){
    this.name = name;
  }
  @funcDecorator1
  getName(){
    return this.name;
  }
}

const kid = new Kid('我是nba球员贾森-基德');
//这里重写了getName方法
kid.getName = ()=>{
  return '我是JsonKid';
}
console.log(kid.getName());

报错结果如下:

2.访问器的装饰器:

//访问器装饰器
function visitDecorator(target:any,key:string,descriptor:PropertyDescriptor){
  descriptor.writable = false;
}

class TMac{
  private _name:string;
  constructor(name:string){
    this._name = name;
  }
  //getter访问器
  get name(){
    return this._name
  }
  //setter访问器
  @visitDecorator
  set name(name:string){
    this._name = name;
  }
}

const T_Mac = new TMac('特雷西-麦克格雷迪');
T_Mac.name = '特雷西-麦克格雷迪是休斯顿火箭队🚀'
console.log(T_Mac.name);  //报错-上面禁止修改属性

• 因为descriptor.writable = false;的关系，执行结果报错
• 再有一个是get和set不能同时使用装饰器，会报错，具体需要参照ts的官方文档的解释，笔者这里也不做说明了。