Typescript 装饰器以及装饰器类型判断

本示例演示有：

• @NgModule()
• @Input()
• @Inject()
• @Param()
• @Method()

下面分别给出这几个Decorator ：

NgModule

function NgModule () {
  return (target, key, desc) => {
    console.log('ngModule', target, key, desc);
  }
}

Inject

function Inject() {
  return (target, key, desc)  => {
    console.log('constructor', target, key, desc);
  }
}

Input

function Input() {
  return (target, key, desc) => {
    console.log('property', target, key, desc);
  }
}

Param

function Param() {
  return (target,key, desc) => {
    console.log('param', target, key, desc);
  }
}

Method

function Method() {
  return (target, key, desc) => {
    console.log('method', target, key, desc);
  }
}

Decorator Demo

@NgModule()
class AdminModule {
  _info: string;

  constructor(
    @Inject()
    private user: string,
    private pwd: string,
    @Inject()
    private tel: string
  ) {

  }
  @Input()
  name: string;

  @Method()
  get info() {
    return _this.info;
  }

  @Method()
  set info(info) {
    this._info = info;
  }

  @Method()
  getUserInfo(@Param() name: string, pwd:string, @Param() email: string) {

  }
 }

示例输出为：

property Object name undefined
method Object info Object
param Object getUserInfo 2
param Object getUserInfo 0
method Object getUserInfo Object
constructor ƒ AdminModule(user, pwd, tel) {
        this.user = user;
        this.pwd = pwd;
        this.tel = tel;
    } undefined 2
constructor ƒ AdminModule(user, pwd, tel) {
        this.user = user;
        this.pwd = pwd;
        this.tel = tel;
    } undefined 0
ngModule ƒ AdminModule(user, pwd, tel) {
        this.user = user;
        this.pwd = pwd;
        this.tel = tel;
    } undefined undefined

从输出的结果看，有以下几个关键点：

1. Property Decorator
   PropertyDecorator 符没有第 3 个参数

const PropertyDecorator = () => {
    return (target:any, propKey: string) {
        // ...
    }
}

2. Method Decorator
   MethodDecorator 有三个参数，第 3 个参数为属性描述符

const MethodDecorator = () => {
    return (target: any, propKey: string, descriptor: any) {
        // ..
    }
}

3. Class Decorator
   ClassDecorator 只有一个参数，构造函数

const ClassDecorator = () => {
    return (target: any) => {
        // ...
    }
}

4. Param Decorator
   4.1 Param Decorator in Constructor
   第一个参数为类构造函数，第二个参数为 undefined,第三个为参数位置索引，从 0 开始

const CtorParamDecorator = () => {
    return (target: Constructor, propKey: undefined, index: number) => {
        // ...
    }
}

4.2 Param Decorator in Method of the Class
第一个参数为类实例对象，第二个参数为 方法名称，第三个参数为参数索引，从 0 开始

const ParamDecorator = () => {
    return (target: any, propKey: string, index: number) => {
        // ...
    }
}

5. 如果同时配置有多个装饰器，则最下面的装饰器先执行。

装饰器判断

const makeDecorator = (...props: any[]) => {
    return (target: any, propKey: string | undefined, descOrIndex: number | obj) => {
        if(propKey) {
            if(typeof descOrIndex  == 'number') {
                // ParamDecorator
            } else if(typeof descOrIndex === 'undefined'){
                // PropertyDecorator
            } else {
                // MethodDecorator
            }
        } else {
            if(typeof descOrIndex === 'number') {
                // CtorParamDcorator
            } else if({
                // ClassDecorator
            }
        }
    }
}