打字稿装饰器不能使用箭头函数

Question

我有一个打字稿装饰器工厂，它在控制台记录执行函数所花费的总时间、实际函数执行结果以及传递给装饰器的参数。

例如

export function performaceLog(...args: any[]) {
return (target: Object, key: string, descriptor: TypedPropertyDescriptor<any>) => {
    var msg = '';
    if (args.length != 0) {
        msg = args.map(arg => arg).join(' ');
    }

    if (descriptor === undefined) {
        descriptor = Object.getOwnPropertyDescriptor(target, key);
    }

    if (typeof descriptor.value !== 'function') {
        throw new SyntaxError('Only functions can be used with log decorators');
    }

    var originalMethod = descriptor.value.bind(target);

    descriptor.value = function() {
        var funcArgs: any = [];
        for (var i = 0; i < arguments.length; i++) {
            funcArgs[i - 0] = arguments[i];
        }
        var startTime = performance.now();
        console.log(`Begin function ${key} with params (${funcArgs}) : ${msg}`);
        var result = originalMethod.apply(this, funcArgs);
        var endTime = performance.now();
        console.log(`End function ${key}. Execution time: ${endTime - startTime} milliseconds. Return result : ${result}`);
        return result;
    };
    return descriptor;
};
}

我将上述装饰器与一个类中存在的函数一起使用： （考虑到我的班级还有其他方法，例如 ctor、get、set 和 utils）。

class LoggerService {
    @performaceLog('validate', 'message')
    handleMessage(message) {
        console.log(message);
        return true;
    };
}

函数调用如下所示：

handleMessage('decoratorValidation');

这给了我完美的输出：

Begin function handleMessage with params (decoratorValidation) : validate message     
decoratorValidation
End function handleMessage. Execution time: 0.3000000142492354 milliseconds. 
Return result : true

但是当我将函数handleMessage更改为支持箭头格式（ES6）时，它会抛出一个错误：

@performaceLog('validate', 'message')
handleMessage = message => {
    console.log(message);
    return true;
};

错误信息：

Unable to resolve signature of property decorator when called as an expression.

我在 tsconfig.json 中正确设置了所有参数。我的整个项目都支持“ES6”目标，我希望装饰器支持箭头功能。

Answer 1

performaceLog 应该只使用原型方法，因为它依赖于 descriptor，这应该是可选的。

在handleMessage = message => ... 类字段的情况下没有descriptor，因为它在类原型中不存在。类字段只是在构造函数中分配给this。

由于同样的原因，这条线不起作用：

descriptor = Object.getOwnPropertyDescriptor(target, key);

为了修补装饰器中的箭头方法，应在类原型上设置陷阱。这是一个通用装饰器的示例，可以与原型方法和实例方法一起使用；它使用get/set 捕获正确的this 上下文并将修饰函数缓存到patchFn 变量。无论descriptor参数如何，它都会返回一个描述符：

function universalMethodDecorator(target: any, prop: string, descriptor?: TypedPropertyDescriptor<any>): any {
    let fn;
    let patchedFn;

    if (descriptor) {
        fn = descriptor.value;
    }

    return {
        configurable: true,
        enumerable: false,
        get() {
            if (!patchedFn) {
                patchedFn = (...args) => fn.call(this, ...args);
            }
            return patchedFn; 
        },
        set(newFn) {
            patchedFn = undefined;
            fn = newFn;
        }
    };

}

这仅适用于 TypeScript 装饰器。 Babel legacy decorators 的行为可能不同。

正如this answer 中所解释的，原型方法可以优于实例方法，原因有几个。原因之一是它们可以无缝装饰，因为装饰器应用于类原型。箭头方法唯一真正的好处是它自然绑定到类实例，但是由于装饰器已经在使用中，如果需要，原型方法可以绑定在装饰器中（这就是universalMethodDecorator 基本上所做的；它是箭头的 noop方法）。