TypeScript中Proxy代理格式化函数遇类型不兼容问题求助

问题分析 #

你遇到的类型错误本质是TypeScript无法自动推断代理后函数的参数类型——原格式化函数的参数分别是boolean、string、number，TS会认为代理函数的参数是这三者的联合类型，但原函数各自只接受单一类型，导致类型交集为never。

正确实现方案 #

我们需要让Proxy的handler返回的包装函数严格匹配原函数的参数类型，同时统一处理null/undefined检查。以下是完整代码：

// 原格式化函数
const formatters = {
  bool: (value: boolean) => value ? 'yes' : 'no',
  currency: (value: string) => value,
  percent: (value: number) => value.toString(),
  // 可添加更多格式化函数
}

// 定义handler，通过泛型约束匹配原函数类型
const handler: ProxyHandler<typeof formatters> = {
  get(target, prop: keyof typeof formatters) {
    const originalFn = target[prop];
    // 返回包装后的函数，自动匹配原函数参数类型
    return function(value: Parameters<typeof originalFn>[0]) {
      // 统一处理null/undefined检查，这里返回空字符串，可按需修改
      if (value == null) return '';
      return originalFn(value);
    } as typeof originalFn;
  }
};

// 创建代理后的格式化函数集合
const proxiedFormatters = new Proxy(formatters, handler);

// 使用示例
proxiedFormatters.bool(true); // 返回 'yes'
proxiedFormatters.currency(undefined); // 返回 ''
proxiedFormatters.percent(50); // 返回 '50'

关键细节说明 #

• 使用ProxyHandler<typeof formatters>约束handler的类型，确保prop是原格式化函数的键名。
• 通过Parameters<typeof originalFn>[0]提取原函数的参数类型，让包装函数的参数类型和原函数完全一致，避免TS类型推断冲突。
• 用as typeof originalFn断言包装函数的类型和原函数一致，保证调用时的类型提示正确。
• 统一的null/undefined检查逻辑放在包装函数中，所有格式化函数都会自动继承这个逻辑。

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