如何修复console方法bind()调用的TypeScript类型兼容错误？

问题根源 #

TypeScript对Console接口的类型检查比JavaScript严格。keyof Console包含了console对象的所有属性（比如非函数类型的memory），就算是函数属性（log、error等），它们的bind方法签名因为原函数参数差异形成了联合类型，TypeScript无法找到通用的调用方式，所以抛出这个错误。而JavaScript不做类型校验，自然能正常运行。

具体修复方案 #

方案1：限定methodName为console方法类型 #

手动定义一个包含所有console方法名的类型，缩小参数范围，让TypeScript能明确推断出具体函数：

type ConsoleMethod = 'log' | 'error' | 'warn' | 'info' | 'debug' | 'trace' | 'dir' | 'dirxml' | 'table' | 'group' | 'groupCollapsed' | 'groupEnd' | 'clear' | 'count' | 'countReset' | 'assert' | 'profile' | 'profileEnd' | 'time' | 'timeLog' | 'timeEnd' | 'timeStamp' | 'context';

function createLogger(methodName: ConsoleMethod, PREFIX: string, methodNameDisplay: string) {
  return console[methodName].bind(console, `[${PREFIX}]`, `[${methodNameDisplay}]`);
}

方案2：类型断言跳过联合类型检查 #

如果不想枚举方法名，直接把目标属性断言为通用函数类型，绕开TypeScript的联合类型校验：

return (console[methodName as keyof Console] as (...args: any[]) => void).bind(console, `[${PREFIX}]`, `[${methodNameDisplay}]`);

注意：这种方式要确保传入的methodName确实是console的方法名，否则可能引发运行时错误。

方案3：类型守卫+运行时校验 #

如果methodName是动态生成的，加个类型守卫做双重校验，既保证类型安全，又避免非法参数：

type ConsoleMethod = 'log' | 'error' | 'warn' | 'info' | 'debug' | 'trace' | 'dir' | 'dirxml' | 'table' | 'group' | 'groupCollapsed' | 'groupEnd' | 'clear' | 'count' | 'countReset' | 'assert' | 'profile' | 'profileEnd' | 'time' | 'timeLog' | 'timeEnd' | 'timeStamp' | 'context';

function isConsoleMethod(methodName: keyof Console): methodName is ConsoleMethod {
  return typeof console[methodName] === 'function';
}

function createLogger(methodName: keyof Console, PREFIX: string, methodNameDisplay: string) {
  if (!isConsoleMethod(methodName)) {
    throw new Error(`${methodName} 不是有效的console方法`);
  }
  return console[methodName].bind(console, `[${PREFIX}]`, `[${methodNameDisplay}]`);
}

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