TypeScript 箭头函数和装饰器

Question

我正在尝试测试是否可以像以下示例一样在 TypeScript 中装饰箭头函数：

function decorateThisFunction() {        
    return (target: any, propertyKey: any, descriptor?: any) => {        
        console.log("This is my decorator do bar!");
    }
}

@decorateThisFunction
export const foo = (): void => {
    console.log("My Arrow Function");
};

如果这不可能，人们推荐其他方法吗？

Answer 1

引用官方文档：

装饰器是一种特殊的声明，可以附加到 class declaration、method、accessor、property 或 parameter。

所以如果你需要一个装饰器，你必须将它附加到一个类：

function decorateThisFunction(target: any, propertyKey: any, descriptor?: any): void {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log("This is my decorator do bar!");
        originalMethod(...args);
    }
}

class SomeClass {
    @decorateThisFunction
    static foo(): void {
        console.log("My Arrow Function");
    }
}

SomeClass.foo();

TypeScript playground

不使用类，您可以简单地使用高阶函数：

function decorateThisFunction(func: (...args: any[]) => any) {
    return function(...args: any[]) {
        console.log("This is my decorator do bar!");
        func(...args);
    }
}

export const foo = decorateThisFunction((): void => {
    console.log("My Arrow Function");
});

foo();

TypeScript playground