TypeScript如何解决联合类型下函数与参数的匹配问题？

问题原因 #

当你定义(arg: string) => void | (arg: number) => void这类联合函数类型时，TypeScript会对函数参数做逆变处理：联合函数的参数类型会被推断为各分支参数类型的交集。由于string和number没有交集，最终参数类型会变成never。

在你的Test<T, U>类型中，虽然每个联合分支里func的参数和data类型完全匹配，但TypeScript无法自动关联联合的分支——它会把x.func推断为(arg: T & U) => void（即never），而x.data是T | U，自然会出现类型不兼容的报错。

针对Test示例的解决方案 #

方案1：添加区分字段（推荐） #

给联合类型的每个分支添加唯一标识字段，让TypeScript能通过这个字段窄化类型，明确当前分支的func和data类型匹配：

type Test<T, U> =
  | {
      type: 'branch1';
      func: (arg: T) => void;
      data: T;
    }
  | {
      type: 'branch2';
      func: (arg: U) => void;
      data: U;
    };

function test<T, U>(x: Test<T, U>) {
  if (x.type === 'branch1') {
    x.func(x.data); // 类型完全匹配，无报错
  } else {
    x.func(x.data); // 类型完全匹配，无报错
  }
}

方案2：重构为单泛型类型 #

如果不需要严格的联合结构，直接将Test定义为单泛型类型，确保func和data始终绑定同一类型：

type Test<T> = {
  func: (arg: T) => void;
  data: T;
};

function test<T>(x: Test<T>) {
  x.func(x.data); // 类型完美匹配
}

// 使用示例
test({ func: (s: string) => console.log(s), data: 'hello' });
test({ func: (n: number) => console.log(n), data: 123 });

方案3：类型断言（妥协方案） #

如果无法修改类型结构，可使用类型断言绕过检查，但这种方式会丢失类型安全性，仅在确保逻辑绝对正确时使用：

function test<T, U>(x: Test<T, U>) {
  (x.func as (arg: T | U) => void)(x.data);
}

针对路由场景的解决方案 #

你的路由场景本质和Test示例一致：每个Route<T>的方法都依赖同一类型T，但当路由是联合类型时，TypeScript无法关联extractData的返回值与其他方法的参数类型。

方案1：给路由添加唯一标识 #

给每个路由增加一个routeName字段，用于类型窄化：

type Route<T extends string, D> = {
  routeName: T;
  extractData: (url: string) => D;
  encodeDataToURL: (data: D) => string;
  getTitle: (data: D) => string;
  render: (data: D) => DOM.Element;
};

// 定义具体路由类型
type HomeRoute = Route<'home', HomePageData>;
type SearchRoute = Route<'search', SearchPageData>;

type AllRoutes = HomeRoute | SearchRoute;

// 处理路由
function handleCurrentRoute(route: AllRoutes, currentUrl: string) {
  const data = route.extractData(currentUrl);
  switch (route.routeName) {
    case 'home':
      route.getTitle(data); // data自动推断为HomePageData
      route.render(data);
      break;
    case 'search':
      route.getTitle(data); // data自动推断为SearchPageData
      route.render(data);
      break;
  }
}

方案2：用泛型函数处理单个路由 #

将路由逻辑封装为泛型函数，确保每个路由的方法和数据类型始终绑定：

type Route<D> = {
  extractData: (url: string) => D;
  encodeDataToURL: (data: D) => string;
  getTitle: (data: D) => string;
  render: (data: D) => DOM.Element;
};

// 处理单个路由的泛型函数
function processRoute<D>(route: Route<D>, url: string) {
  const data = route.extractData(url);
  document.title = route.getTitle(data);
  document.body.appendChild(route.render(data));
}

// 路由器管理时，对每个路由调用该函数
const allRoutes: (Route<HomePageData> | Route<SearchPageData>)[] = [/* 路由实例 */];
allRoutes.forEach(route => processRoute(route, window.location.href));

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