TypeScript 箭頭函數和裝飾器

Question

我正在嘗試鍛煉是否可以像這個例子一樣在 TypeScript 中裝飾箭頭 function ：

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 聲明、 方法、 訪問器、 屬性或參數。

因此，如果您需要裝飾器，則必須將其附加到 class：

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操場

在不使用 class 的情況下，您可以簡單地使用高階函數：

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操場