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]// 给类中添加一个属性nametarget.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:stringconstructor(){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() {}@docgetName() {}
}
/*结果
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);  // 我是装饰器上的字符串}
}