javascript - 在 TypeScript/Angular 2 的包装函数中保留 console.log() 行号

Question

我正在尝试为我的 TypeScript/Angular 2 应用程序创建日志记录服务。不幸的是，如果我调用 console.log，行号是错误的。即使我尝试 return console.log()。

这是我的代码:

LoggerService.ts

export class LoggerService {    
  log(message) {
    // Server-side logging
    // [...]
    if (clientSideLogging) return console.log(message);
  }
}

SomewhereElse.ts

this.logger.log('hello world');

-> 显示 LoggerService.ts 的行号而不是源代码

Answer 1

您可以使用 .bind() method将 window.console 绑定(bind)到您的自定义日志方法，然后返回该函数，以便代码在调用时在原始范围内执行。

这样做时，调用记录器服务的 log 方法时将保留行号:

class LoggerService {
  public log = console.log.bind(window.console);
}

// ...or annotated:
class LoggerService {
  public log: (message) => void = console.log.bind(window.console);
}

然后如果你想在你的条件语句中添加:

class LoggerService {
  public log = clientSideLogging ? console.log.bind(window.console) : () => {};
}

这里是 an example使用编译后的 TypeScript 代码。

---

除了上面提到的单行解决方案，如果你想在 log 方法中实现额外的逻辑，那么你可以使用 getter它将返回并调用绑定(bind)到 window.console 的 console.log 函数。

class LoggerService {
  public get log (): Function {
    // Implemnt server-side logging

    return console.log.bind(window.console);
  }
}

如您所知，返回 console.log 函数很重要，因为在另一个范围内直接调用它时，它不会保留行号。

然后如果你想在你的条件语句中添加:

class LoggerService {
  public get log (): Function {
    const log = console.log.bind(window.console);

    // Implemnt server-side logging

    return clientSideLogging ? log : () => {};
  }
}

这里是 an example使用编译后的 TypeScript 代码。