如何让TypeScript的IViewsRoute接口支持泛型适配多种页面类型

云上老周

2026-8-21

解决方案

调整泛型接口定义

将原有的IViewsRouteData和IViewsRoute改为泛型接口，通过泛型参数动态指定page对应的类型：

// 假设基础类型（Data、Route、BreadCrumbs）已提前定义
interface Data {}
interface Route {}
interface BreadCrumbs {
  label: string;
}

// 泛型版路由数据接口
interface IViewsRouteData<TPage> extends Data {
  breadcrumbs?: (data: { page: TPage }) => BreadCrumbs;
}

// 泛型版路由接口，默认泛型参数设为unknown兼容无页面类型的场景
export interface IViewsRoute<TPage = unknown> extends Route {
  data?: IViewsRouteData<TPage>;
}

路由数组的使用方式

每个路由项可以通过指定泛型参数，自定义对应的页面类型，无需单独创建新接口：

// 示例页面类型
interface CarPage {
  title: string;
}

interface ManufacturePage {
  name: string;
}

// 定义包含多种页面类型的路由数组
const routes: Array<IViewsRoute<CarPage> | IViewsRoute<ManufacturePage>> = [
  {
    data: {
      breadcrumbs: (data: { page: CarPage }): BreadCrumbs => ({
        label: data.page.title
      }),
    }
  },
  {
    data: {
      breadcrumbs: (data: { page: ManufacturePage }): BreadCrumbs => ({
        label: data.page.name
      }),
    }
  }
];

如果希望TypeScript自动推断类型，也可以通过类型断言简化写法：

const routes = [
  {
    data: {
      breadcrumbs: (data: { page: CarPage }): BreadCrumbs => ({
        label: data.page.title
      }),
    }
  } as IViewsRoute<CarPage>,
  {
    data: {
      breadcrumbs: (data: { page: ManufacturePage }): BreadCrumbs => ({
        label: data.page.name
      }),
    }
  } as IViewsRoute<ManufacturePage>
];