面试题：TypeScript前端路由类型约束在复杂嵌套路由中的应用

Question

设计一个复杂的嵌套路由系统，包含多级子路由，并且每个路由可能有不同的参数和元数据。使用TypeScript实现一套完整的类型约束方案，涵盖路由配置、参数传递、子路由嵌套以及元数据的类型定义。解释如何在这个复杂场景下利用TypeScript的高级类型特性（如条件类型、映射类型等）确保路由系统的类型安全和可维护性。

Answer 1

1. 路由配置类型定义

// 定义路由参数类型
type RouteParams = {
    [key: string]: string | number | boolean;
};

// 定义路由元数据类型
type RouteMeta = {
    title: string;
    [key: string]: any;
};

// 定义单个路由配置类型
type RouteConfig = {
    path: string;
    component: any;
    params?: RouteParams;
    meta?: RouteMeta;
    children?: RouteConfig[];
};

// 定义根路由配置类型
type RootRouteConfig = RouteConfig[];

2. 参数传递类型定义

假设我们有一个函数来处理路由跳转并传递参数：

function navigateTo(route: RouteConfig, params?: RouteParams) {
    // 这里可以根据路由配置和参数进行实际的导航逻辑
    console.log(`Navigating to ${route.path} with params:`, params);
}

3. 子路由嵌套类型定义

子路由嵌套已经在 RouteConfig 类型中通过 children 字段进行了定义，它是一个 RouteConfig 数组。

4. 利用高级类型特性确保类型安全和可维护性

• 条件类型：可以用来根据不同的路由类型（是否有子路由等）进行不同的类型处理。例如，定义一个类型来判断一个路由是否有子路由：

type HasChildren<T extends RouteConfig> = T extends { children: infer C extends RouteConfig[] } ? true : false;

这样可以在其他类型定义中根据这个条件类型进行不同的处理，比如在获取路由的所有子孙路由时，可以根据是否有子路由进行递归处理。

• 映射类型：可以用来对路由配置的某些字段进行批量操作。例如，如果我们想对所有路由的元数据中的 title 字段进行大写转换，可以这样定义一个映射类型：

type UppercaseTitleMeta = {
    [K in keyof RouteMeta]: K extends 'title' ? string : RouteMeta[K];
};

然后可以将这个类型应用到路由配置中的元数据类型上，确保所有路由元数据的 title 字段都是字符串类型，并且可以在后续逻辑中进行大写转换操作。

通过上述类型定义和利用TypeScript的高级类型特性，能够有效地确保复杂嵌套路由系统的类型安全和可维护性。在实际应用中，可以将这些类型定义集成到前端框架（如React Router等）的路由配置中，提高代码的健壮性和可读性。