Vue3 TypeScript库兼容函数参数类型的无破坏性变更方案

首先明确：无法在运行时直接判断一个函数期望接收的是string类型的id还是FooObj类型。因为TypeScript的类型信息在编译为JavaScript后会被完全擦除，函数本身不会保留参数的类型元数据，你之前通过fn.length判断的逻辑完全无效——两种函数的参数个数都是1，所以isFooObjFunction永远会返回false。

下面是几种可行的兼容方案：

方案1：包装函数统一适配两种参数类型 #

在库内部对传入的fooFunc进行包装，让它同时支持接收string或FooObj，自动适配调用逻辑：

interface FooObj {
  id: string;
}
type FooExtendedFunction = (fooObj: FooObj) => void;
// 保留旧类型用于兼容
type FooFunction = (id: string) => void;

interface Props {
  // 允许用户传入旧版或新版函数
  fooFunc: FooFunction | FooExtendedFunction;
}

// 包装函数，返回一个兼容两种参数的函数
function wrapFooFunc(func: FooFunction | FooExtendedFunction): (arg: string | FooObj) => void {
  return (arg) => {
    if (typeof arg === 'string') {
      // 如果传入的是string，优先按旧版函数调用；如果是新版函数，自动转为FooObj传入
      if (isOldStyleFunction(func)) {
        func(arg);
      } else {
        func({ id: arg });
      }
    } else if (typeof arg === 'object' && arg !== null && 'id' in arg) {
      // 如果传入的是FooObj，优先按新版函数调用；如果是旧版函数，提取id传入
      if (isOldStyleFunction(func)) {
        func(arg.id);
      } else {
        func(arg);
      }
    }
  };
}

// 辅助判断：通过给新版函数添加标记来区分
const extendedFuncMarker = Symbol('extendedFunc');

// 库导出的新版函数都添加这个标记
export function createExtendedFunc(fn: FooExtendedFunction): FooExtendedFunction {
  (fn as any)[extendedFuncMarker] = true;
  return fn;
}

// 判断是否为旧版函数
function isOldStyleFunction(fn: any): fn is FooFunction {
  return !(fn && fn[extendedFuncMarker]);
}

方案2：使用函数重载+容错调用 #

在组件内部定义支持两种参数的重载方法，通过try-catch容错处理调用逻辑（适合快速兼容，缺点是有少量运行时开销）：

// 组件内部调用fooFunc的重载方法
function invokeFoo(arg: string): void;
function invokeFoo(arg: FooObj): void;
function invokeFoo(arg: string | FooObj): void {
  const { fooFunc } = props;
  try {
    if (typeof arg === 'string') {
      // 先尝试按旧版调用
      (fooFunc as FooFunction)(arg);
    } else {
      // 先尝试按新版调用
      (fooFunc as FooExtendedFunction)(arg);
    }
  } catch {
    // 调用失败时切换方式
    if (typeof arg === 'string') {
      (fooFunc as FooExtendedFunction)({ id: arg });
    } else {
      (fooFunc as FooFunction)(arg.id);
    }
  }
}

方案3：标记旧类型为废弃，逐步迁移 #

如果希望长期彻底切换到新版类型，可以：

• 给FooFunction添加@deprecated注释，提示用户迁移到FooExtendedFunction
• 在Props中暂时保留FooFunction | FooExtendedFunction的兼容类型
• 内部通过方案1的包装逻辑处理兼容，同时在文档中给出迁移示例
• 经过几个版本后移除旧类型支持

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