TS中的装饰器

环境：

1. 安装：node
2. 安装：typescript
3. 初始化ts：tsc --init ， 自动创建tsconfig.json文件
4. 修改tsconfig.json中的配置生效："experimentalDecorators": true,
5. 安装ts-node：npm i ts-node -g,使用ts-node命令可以直接编译ts文件，不必再转为js
6. 创建ts文件：index.ts
7. 编译ts代码：ts-node index.js

1 类装饰器ClassDecorator

• target是构造函数

// ClassDecorator的类型定义
declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

// 类装饰器
const doc :ClassDecorator = (target: Function) => {
    console.log("target==>", target) // target==> [Function: MyClass]
    // 给类中添加一个属性name
    target.prototype.name = "小明"
}

@doc 
class MyClass {
    constructor(){}
}


const myClass:any = new MyClass()
console.log("name===>",myClass.name); //name===> 小明

2. 属性装饰器PropertyDecorator

// 类型定义
declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;

// 属性 装饰器
const doc :PropertyDecorator = (target: object,key: string|symbol) => {
    console.log("target===>",target,"key===>",key); //target===> {} key===> name
}


class MyClass {
    @doc 
    name:string
    constructor(){
        this.name = "小明"
    }
}

3. 方法装饰器MethodDecorator

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

// 方法 装饰器
const doc: MethodDecorator = (
  target: object,
  propertyKey: string | symbol,
  descriptor: any
) => {
  console.log("target===>", target);
  console.log("propertyKey===>", propertyKey);
  console.log("descriptor===>", descriptor);
};

class MyClass {
  constructor() {}
  @doc
  getName() {}
}
/*结果
target===> { getName: [Function (anonymous)] }
propertyKey===> getName	//方法的名字，只是个字符串
descriptor===> {
  value: [Function (anonymous)],
  writable: true,	// 可读
  enumerable: true,	// 可枚举
  configurable: true	// 可配置
}
*/

4. 参数装饰器ParameterDecorator

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

// 参数 装饰器
const doc: ParameterDecorator = (
  target: object,
  propertyKey: string | symbol | undefined,
  parameterIndex: number
) => {
  console.log("target===>", target);
  console.log("propertyKey===>", propertyKey);
  console.log("parameterIndex===>", parameterIndex);
};

class MyClass {
  constructor() {}

  getName(name: string, @doc age: number) {}
}
/*
target===> { getName: [Function (anonymous)] }
propertyKey===> getName
parameterIndex===> 1 // 参数索引位置，name是0，age是1
*/

5. 装饰器传参

// 这种写法可能比较好理解
/*
const log = (b: string) => {
  const doc: MethodDecorator = (
    target: any,
    propertyKey: string | symbol,
    descriptor: any
  ) => {
    // getFun就是类中getName方法
    const getFun = descriptor.value;
    getFun(b);
  };
  return doc; // 在函数log中返回另一个函数doc
};
*/


const log = (b: string) => {
  return (target: any, propertyKey: string | symbol, descriptor: any) => {
    // getFun就是类中getName方法
    // 通过descriptor.value获取装饰器装饰的方法
    const getFun = descriptor.value;
    getFun(b);
  };
};

class MyClass {
  constructor() {}
  @log("我是装饰器上的字符串")
  getName(a: string) {
    console.log(a);  // 我是装饰器上的字符串
  }
}