创建带参数的装饰器并访问被装饰的函数参数答案

【问题标题】：Create decorator with parameters and access the decorated function parameters创建带参数的装饰器并访问被装饰的函数参数
【发布时间】：2020-06-20 14:00:27
【问题描述】：

我想写一个日志装饰器来记录每次调用函数（装饰器装饰的地方）。我想记录装饰器作为参数接受的密钥以及函数发送时使用的参数。

到目前为止，我知道如何编写一个简单的日志函数来记录函数参数但不能接受任何参数：

export function logger(
  target: Object,
  key: string,
  descriptor: PropertyDescriptor
) {
  const original = descriptor.value;
  descriptor.value = function() {
    const targetName = target.constructor.name;
    const args = JSON.stringify(arguments);
    console.log(`Calling ${targetName}.${key} with ${JSON.stringify(arguments)}`);
    const result = original.apply(this, arguments);
    return result;
  };
  return descriptor;
}

我也知道怎么写一个接受参数的装饰器：

log(logData: { value: string; target?: string }) {
    return function(
      target: Object,
      key: string,
      descriptor: PropertyDescriptor
    ) {
      console.log(`Key: ${logData.value}, Target: ${logData.target}`);

    };
  }

所以你可能会猜到我在这里遗漏了一个链接，它是编写一个日志装饰器，它可以接受一个键作为参数，并用调用装饰函数的参数记录这个键。

我在这里有这 2 个装饰器的工作示例： https://stackblitz.com/edit/angular-udi-decorators?file=src%2Fapp%2Flogger.ts

【问题讨论】：

标签： angular typescript typescript-decorator

【解决方案1】：

所以，我想通了。我的解决方案有效。我想为函数构建一个装饰器，每次调用函数时都会保存数据。它将为每个函数保存一个唯一的键（它将与装饰器一起提供），并且还将发送发送到该函数的参数。

logWithData(logData: { value: string; target?: string }) {
    return function logger(
      target: Object,
      key: string,
      descriptor: PropertyDescriptor
    ) {
      const original = descriptor.value;
      descriptor.value = function() {
        const targetName = target.constructor.name;
        const args = JSON.stringify(arguments);
        console.log(`Key: ${logData.value}, Target: ${logData.target}, paramater: ${arguments[0]}`);
        const result = original.apply(this, arguments);
        return result;
      };
      return descriptor;
    };
  }

我也把这段代码放到了stackblitz here

【讨论】：