如何实现支持嵌套调用的TypeScript环境判断式自定义日志工具？

问题分析 #

你原有代码存在两个核心问题：

1. 重复输出问题：调用logger('error').error时，会先执行console.log('error')，同时返回对象时直接执行console.error(...data)，导致两次输出；且console.error无返回值，最终error属性值为undefined。
2. 非Dev模式报错：当isDev为false时，logger直接返回undefined，此时访问logger('test').error会触发“Cannot read properties of 'undefined'”错误。

解决方案 #

方案1：满足核心需求（推荐）

此方案实现你期望的调用方式：logger('log')对应普通日志，logger.error('error')对应错误日志，仅在Dev模式下输出。

// 替换为你的环境判断逻辑，比如 process.env.NODE_ENV === 'development'
const isDev = true;

// 定义logger类型：既是函数，也包含error静态方法
type Logger = {
  (...data: any[]): void;
  error: (...data: any[]) => void;
};

const logger: Logger = (...data: any[]) => {
  if (isDev) {
    console.log(...data);
  }
};

// 挂载error静态方法
logger.error = (...data: any[]) => {
  if (isDev) {
    console.error(...data);
  }
};

使用示例：

// isDev === true
logger('log'); // 输出 'log'
logger.error('error'); // 输出 'error'

// isDev === false
logger('log'); // 无输出
logger.error('error'); // 无输出

方案2：兼容链式调用

如果需要支持链式调用（如logger('log').error('err')），可以调整实现，确保任何情况下访问.error都不会报错：

const isDev = true;

type LoggerApi = {
  error: (...data: any[]) => void;
};

// 定义logger类型：函数返回链式API，同时包含error静态方法
type Logger = ((...data: any[]) => LoggerApi) & {
  error: (...data: any[]) => void;
};

const logger: Logger = (...data: any[]) => {
  if (isDev) {
    console.log(...data);
  }
  // 返回链式调用的API对象
  return {
    error: (...errData: any[]) => {
      if (isDev) {
        console.error(...errData);
      }
    }
  };
};

// 挂载静态error方法
logger.error = (...data: any[]) => {
  if (isDev) {
    console.error(...data);
  }
};

使用示例：

// isDev === true
logger('log'); // 输出 'log'
logger('log').error('err'); // 先输出 'log'，再输出 'err'
logger.error('error'); // 输出 'error'

// isDev === false
logger('test').error; // 无输出，且不会报错

注意事项 #

如果你只想输出错误日志，直接使用logger.error('error')即可，无需链式调用logger('error').error——后者会先触发普通日志输出，再触发错误日志输出（Dev模式下）。

内容的提问来源于stack exchange，提问作者luicfrr