好文推荐

localStorage的别样用法
 借助npm包统一包管理器

前言

约是两年前，就对着ts文档学习了装饰器的使用，我是相信温故而知新的，故今天重新在学一遍，相信会有不一样的收获

启用

在项目中，需要在tsconfig.json中显示的启用

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

装饰器分类

1-类装饰器
2-属性装饰器
3-方法装饰器
4-参数装饰器
5-访问器装饰器

执行顺序

参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员
参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员
参数装饰器应用到构造函数。
类装饰器应用到类。

使用

类装饰器

1-其ts定义如下

可以看到，类的本质是Function类型，这意味着，我们可以通过prototype来进行扩展，同时从返回值可以猜测，如果返回值类型不是void，则极大可能性会将返回的值作为装饰器本身

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

2-返回void

function sex<T extends {new(...args:any[]):{}}>(constructor:T){
  constructor.prototype.logSex = function(){
    console.log('男')
  }
}

@sex
class Person{
}

(new Person() as any).logSex()

3-返回Function

上一个返回void的示例是无法传递参数的，可以通过返回函数类型来解决

function sex(msg:string){
  return function<T extends {new(...args:any[]):{}}>(constructor:T){
    constructor.prototype.logSex = function(){
      console.log(msg)
    }
  }
}

@sex('用户的')
class Person{
}
(new Person() as any).logSex()

4-重载

由于class本质上也是Function类型，所以这可以看作是3的另一种表达形式，且更灵活些

function sex<T extends {new(...args:any[]):{}}>(Tar:T){
  return class extends Tar{
    constructor(...args:any[]){
      super()
    }
  }
}

@sex
class Person{
}

属性装饰器

1-定义

从定义可知，其也是一个函数，且被执行时会接收两个参数

1-对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2-成员的名字

declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;

2-使用

我们可以对某个属性进行监控，并当某个操作行为发生时执行一些关联动作

function reactive(Tar:any,p:string){
  let value = Tar[p]

  const get = function(){
    return value
  }

  const set = function(newValue:any){
    Tar.changeName(newValue)
    value = newValue
  }

  if(Reflect.deleteProperty(Tar,p)){
    Object.defineProperty(Tar,p,{
      set,
      get,
      enumerable:true,
      configurable:true
    })
  }

}

class Person{
  @reactive
  name:string=''
  changeName(newName:string){
    console.log('改名字了，新名字是：'+newName)
  }
}
const p = new Person() 
p.name
p.name = '23'
console.log(p.name)

方法装饰器

1-定义

declare type MethodDecorator = 
<T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) 
=> TypedPropertyDescriptor<T> | void;

相比较属性选择器，其多了参数三，其对应的ts定义如下

value属性表示的是函数体，这意味着可以先将原函数体缓存后执行重写等操作

interface TypedPropertyDescriptor<T> {
    enumerable?: boolean;
    configurable?: boolean;
    writable?: boolean;
    value?: T;
    get?: () => T;
    set?: (value: T) => void;
}

2-示例

拿我之前写npm包时遇到的一个需求举例，在初始化的时候用到了异步数据，在异步执行结束前如果用户执行了do方法，则需要对其进行缓存，等异步结束后再取回依次调用，伪代码如下

import { config } from '.'

function delay(_,_, descriptor){
  const value = descriptor.value
  descriptor.value = function(...args:any[]){
    if(config.asyning){
        config.que.push(descriptor)
    }else{
      value.apply(this,args)
      config.que = []
    }
  }
  return descriptor
}

class NAS{
  @delay
  do(){
  }
}

参数装饰器

1-定义

declare type ParameterDecorator = 
(target: Object, propertyKey: string | symbol, parameterIndex: number) => void;

2-示例

在参数装饰器执行时收集必选信息，当运行方法装饰器时重写descriptor.value并加入判断逻辑

const requiredMap:any = {

}
function required(_: any, propertyKey: string, parameterIndex: number){
  requiredMap[propertyKey]=parameterIndex
}

function validate(_:any,__:any, descriptor:any){
  const i = requiredMap[descriptor.value.name]
  if(i !== undefined){
    descriptor.value = (...args:any[])=>{
      if(args[i] === undefined){
        throw new Error('参数缺失')
      }
    }
  }
  return descriptor
}

class Person{
  @validate
  changeName(@required newName:string){
    console.log('改名字了，新名字是：'+newName)
  }
}
const p = new Person() 
p.changeName()