TypeScript：函数表达式的装饰器答案

【问题标题】：TypeScript: Decorators for Function ExpressionsTypeScript：函数表达式的装饰器
【发布时间】：2017-08-17 07:55:38
【问题描述】：

我正在尝试将函数装饰器添加到函数表达式。装饰器适用于函数声明，但不适用于函数表达式。

装饰器：

function track(val: string) {

    return function(_target: any, _key: string, descriptor: any)  {

        const originalMethod = descriptor.value;

        descriptor.value = function(...args: any[]) {
           Logger.log(val);
           originalMethod.apply(this, args);
        };

        return descriptor;
    };

我要注释的函数表达式：如果我尝试这样装饰，它将不起作用：

const handleClick = @track('trackMe') (e) => { console.log(e) };

或者这个：

@trackMetric('sdf')
const handleClick = (e) => { console.log(e) };

我有 experimentalDecorators 标记并针对 ES5。

【问题讨论】：

Right, as stated in the docs: “随着 TypeScript 和 ES6 中 Classes 的引入，现在存在某些需要附加功能来支持注释或修改的场景类和类成员。装饰器提供了一种为类声明和成员添加注释和元编程语法的方法。”。只有类可以被装饰。
目前不支持函数的装饰器，但 TS 遵循正在进行中的 ES 装饰器提案，请参阅github.com/iddan/proposal-function-expression-decorators/issues/…

标签： typescript decorator

【解决方案1】：

你不能装饰一个函数，你只能装饰：

类构造函数
类方法
类方法参数
类获取器/设置器
类属性

【讨论】：

为什么？ ? 装饰函数或函数参数有什么问题？
Typescript 遵循 ECMAScript，似乎函数提升使事情变得复杂......所以事情仍在讨论：github.com/wycats/javascript-decorators/issues/4

【解决方案2】：

你可以编写一个方法并用你的工厂装饰这个方法，如下所示：

因此，在 TypeScript 中对单个声明评估多个装饰器时执行以下步骤：

每个装饰器的表达式都是从上到下计算的。然后将结果作为函数从下到上调用。如果我们要使用装饰器工厂，我们可以通过以下示例观察此评估顺序：

function f() {
    console.log("f(): evaluated");
    return function (
            target,
            propertyKey: string,
            descriptor: PropertyDescriptor
        ) {
        console.log("f(): called");
    };
}

function g() {
    console.log("g(): evaluated");
    return function (
        target,
        propertyKey: string,
        descriptor: PropertyDescriptor
    ) {
        console.log("g(): called");
    };
}

class C {
    @f()
    @g()
    method() {}
}

这会将这个输出打印到控制台：

您应该阅读以下内容：Decorators in Typescript

【讨论】：