vue3+ts怎么扩展联合类型

Question

前端初学ts，请问一下各位vue3+ts中的一个问题

我从vue-router中引用了一个叫RouteRecordRaw的数组，这个数组是联合类型的

然后我想要用el-tree的组件来创建一个简易的路由菜单，点击跳转

现在我遇到了一个问题，el-tree中树节点的属性名称是label，但是publicRoutes是RouteRecordRaw类型的，里面没有label，因此就不能直接直接把publicRoutes赋值给treeData

于是我想在RouteRecordRaw中添加一个label属性，新建一个叫routerTree的类型

但是这样报错

提示RouteRecordRaw类型不能赋值给routerTree类型

请问一下这里该怎么写才能扩展RouteRecordRaw，或者生成一个新类型

百度了很久也没找到类似情况的解决办法，希望有人能指点一下，谢谢

Answer 1

引自免费微信小程序：皆我百晓生

要解决这个问题，首先需要理解Vue Router的RouteRecordRaw接口和如何在TypeScript中扩展类型。RouteRecordRaw是一个复杂类型，包含了多种路由记录的结构，包括单视图、多视图、带子路由的视图等。你的目标是在不破坏原有类型安全性的前提下，给这些路由记录增加一个label属性。

解决方案：

1. 创建一个通用函数来添加label属性：由于RouteRecordRaw是联合类型，你需要确保添加的label属性适用于所有可能的类型成员。这可以通过创建一个通用的映射函数实现，该函数接收RouteRecordRaw类型的元素并返回带有label的新对象。

2. 定义一个新的类型：为了处理RouteRecordRaw的不同变体，可以定义一个新的类型，这个类型基于RouteRecordRaw但额外包含label字段。

代码示例：

// 假设这是你的原始类型
type RouteRecordRaw = RouteRecordSingleView | RouteRecordSingleViewWithChildren | RouteRecordMultipleViews | RouteRecordMultipleViewsWithChildren | RouteRecordRedirect;

// 创建一个辅助类型，用于扩展RouteRecordRaw的每个变体
type LabeledRouteRecord<T extends RouteRecordRaw> = T & {
    label: string;
};

// 现在可以使用LabeledRouteRecord来处理任何RouteRecordRaw的实例
const treeData: LabeledRouteRecord<RouteRecordRaw>[] = publicRoutes
    .filter((x) => x.name)
    .map((x) => {
        return {
            ...x,
            label: x.meta.title // 假设meta.title存在且是字符串
        };
    });

// 使用树形数据
<el-tree :data="treeData" @node-click="clickNode"></el-tree>

const clickNode = (data: LabeledRouteRecord<RouteRecordRaw>) => {
    const routerName = data.name; // 假设name存在
    router.push({ name: routerName });
};

在这个示例中，LabeledRouteRecord类型是RouteRecordRaw的一个扩展版本，它通过类型合并（&操作符）增加了label字段。...x语法用于复制原始对象的所有属性，然后再添加label属性。

这种方法确保了类型安全性和代码的可读性，同时允许你在保持原有类型结构的基础上添加新的属性。通过这种方式，你可以将转换后的数据直接传递给el-tree组件，而不会遇到类型错误。