JS装饰器的介绍

装饰器的基本介绍

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。
装饰器使用@expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入

装饰器分类

装饰器大体上分为：

1. 方法装饰器
2. 类装饰器
3. 属性装饰器
4. 参数装饰器
5. 访问器装饰器（get & set）

装饰器的使用

/**
 * 方法装饰器：方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。 
它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义
 * @param target ：对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * @param name ：成员的名字
 * @param descriptor ：成员的属性描述符。
 */
const functionDecorator = (target, name, descriptor) => {
    console.log('方法装饰器函数被调用');
    console.log('target：', target);
    console.log('name：', name);
    console.log('descriptor：', descriptor);
}

/**
 * 方法装饰器带参数1
 * @param level 接受的参数
 * @returns 
 */
const functionDecorator1 = (level) => {
    console.log('log函数被调用');
    return (target, name, descriptor) => {
        console.log('log函数返回装饰器函数被调用：', level);
        // 缓存之前的值
        const oldValue = descriptor.value;
        // 复写原来的老值
        descriptor.value = (...args) => {
            // 使用原来的函数调用
            return oldValue.apply(null, args)
        }
    }
}

/**
* 方法装饰器带参数2
* @param level 接受的参数
* @returns 
*/
const functionDecorator2 = (level) => {
    console.log('log2函数被调用');
    return (target, name, descriptor) => {
        console.log('log2函数返回装饰器函数被调用：', level);
        // 缓存之前的值
        const oldValue = descriptor.value;
        // 复写原来的老值
        descriptor.value = (...args) => {
            // 使用原来的函数调用
            return oldValue.apply(null, args)
        }
    }
}

/**
 * 类装饰器：类装饰器在类声明之前被声明（紧靠着类声明）。 
类装饰器应用于类构造函数，可以用来监视，修改或替换类定义
类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。
如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。
 * @param target 
 */
const classDecorator = (target) => {
    console.log('类装饰器函数被调用');
    console.log(`target: ${target}`);
}

/**
 * 类装饰器带参数
 * @param params 
 * @returns 
 */
const classDecorator1 = (...params) => (target) => {
    console.log(`接受的参数: ${params}`);
    console.log(`target: ${target}`);
}


/**
 * 参数装饰器:参数装饰器声明在一个参数声明之前（紧靠着参数声明）。 
参数装饰器应用于类构造函数或方法声明。
参数装饰器不能用在声明文件（.d.ts），重载或其它外部上下文（比如declare的类）里。
 * @param target 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * @param propertyKey 成员的名字。
 * @param parameterIndex 参数在函数参数列表中的索引。
 */
function paramDecorator(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    console.log('参数装饰器函数被调用');
    console.log(`target`, target);
    console.log(`propertyKey`, propertyKey);
    console.log(`parameterIndex`, parameterIndex);
}

/**
 * 属性装饰器
 * @param target 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * @param name 成员的名字。
 */
const propertyDecorator = (target, name) => {
    console.log('属性装饰器函数被调用');
    console.log('target:', target)
    console.log('name:', name)
}

/**
 * 访问器装饰器声明在一个访问器的声明之前（紧靠着访问器声明）。 
 访问器装饰器应用于访问器的属性描述符并且可以用来监视，修改或替换一个访问器的定义。 
 访问器装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如declare的类）里。
 (TypeScript不允许同时装饰一个成员的get和set访问器。取而代之的是，一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为，在装饰器应用于一个属性描述符时，它联合了get和set访问器，而不是分开声明的)
 * @param target 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * @param name 成员的名字。
 * @param descriptor 成员的属性描述符。
 */
const visitDecorator = (target, name, descriptor) => {
    console.log('访问装饰器函数被调用'); 
}

/**
 * 带参数的访问装饰器：用于改变属性访问器的默认行为
 * @param flag 
 * @returns 
 */
const visitDecorator1 =  (flag:boolean) => {
    return (target, name, descriptor) => {
        descriptor.configurable = flag;
    }
}

@classDecorator
class Maths {
    @propertyDecorator
    private _version: number

    constructor(version: number) {
        this._version = version;
    }

    @visitDecorator1(false)
    get version(){
        return this._version;
    }

    @functionDecorator
    add(@paramDecorator num1: number, @paramDecorator num2: number) {
        return num1 + num2
    }
}
const math = new Maths(1)
console.log(math.add(2, 3));
console.log(math.version);

运行结果

属性装饰器函数被调用
target: {}
name: _version
参数装饰器函数被调用
target {}
propertyKey add
parameterIndex 1
参数装饰器函数被调用
target {}
propertyKey add
parameterIndex 0
方法装饰器函数被调用
target： {}
name： add
descriptor： {
value: [Function: add],
writable: true,
enumerable: false,
configurable: true
}
类装饰器函数被调用
target: class Maths {
constructor(version) {
this._version = version;
}
get version() {
return this._version;
}
add(num1, num2) {
return num1 + num2;
}
}
5
1

环境配置

我们先准备一个TS的基本环境。创建一个新的文件夹。

• npm i typescript --save-dev 安装ts依赖
• npm i ts-node --save-dev一个在node中写ts的工具包
• npx tsc --init 初始化一个ts项目
• 打开"experimentalDecorators": true, 属性，因为装饰器属于一个实验性的属性
• npx ts-node index.ts来编译执行写的ts文件

为了避免ts的类型检查也可以把"strict": false,设为false或者关闭该属性