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

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 ， descriptor应该是可选的。

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

此行不会出于同样的原因：

descriptor = Object.getOwnPropertyDescriptor(target, key);

为了在装饰器中修补箭头方法，应该在类原型上设置陷阱。 以下是通用装饰器的示例，可以与原型和实例方法一起使用; 它使用get / set来捕获正确的this上下文并将修饰的函数缓存到patchFn变量。 无论descriptor参数如何，它都返回一个描述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 遗留装饰器可能表现不同。

如本回答所述 ，由于多种原因，原型方法可能优于实例方法。 其中一个原因是它们可以无缝装饰，因为装饰器应用于类原型。 arrow方法的唯一真正好处是它自然地绑定到类实例，但由于装饰器已经在使用中，如果需要，可以在装饰器中绑定原型方法（这是universalMethodDecorator基本上做的;它是箭头方法的noop） 。