从vue-router route[x].name生成类型

q9yhzks0  于 2023-08-07  发布在  Vue.js
关注(0)|答案(2)|浏览(117)

我正在尝试从vue路由器的路由生成路由名称。目标是使用助手函数findRouteByName()来找到路由。
但是helper函数的参数应该有真实的的route.name作为类型。当我尝试这样做时,我得到以下错误:

The type 'readonly [{ readonly path: "/"; readonly name: "Root"; readonly children: readonly []; },
{ readonly path: "/somePath"; readonly name: "somePath1"; readonly component: "Blub"; readonly
 children: readonly []; }, { readonly path: "/somePath2"; readonly name: "somePath2"; readonly 
component: "Blub"; readonly children: ...' is 'readonly' and cannot be assigned to the mutable type 
'RouteRecordRaw[]'.(4104)

字符串
但有个办法
示例:

只有当我不给予路由类型RouteRecordRaw[]时,图中的例子才有效。
然后我就可以实现我的目标,并使用函数中的类型作为参数。
但是我必须并且应该给予RouteRecordRaw[]作为路由的类型。否则,路由器初始化时会出现故障。所以它应该与RouteRecordRaw[]一起工作。
我已经在Stackblitz上准备好了一切,也许你们中的一个会找到一个优雅的解决方案。

Stackblitz Example

cyvaqqii

cyvaqqii1#

尝试使用satisfies RouteRecordRaw[]而不是as const
你会得到相同的类型扣除,但ts不会因为额外的readonly s而对你大喊大叫

bxgwgixi

bxgwgixi2#

这里有一种方法可以确保满足所有类型的要求,同时还可以获得findRouteByName的智能感知。
router/index.ts

import {
  RouteRecordRaw,
  _RouteRecordBase,
  createRouter,
  createWebHistory,
} from "vue-router";

type ForceMergeTypes<T, K> = T | (K & Record<never, never>);

type Paths = "/" | "somePath" | "somePath2";
type Names = "Root" | "somePath" | "somePath2";

type ExtendedRouteRecordBase = _RouteRecordBase & {
  path: ForceMergeTypes<Paths, RouteRecordRaw["path"]>;
  name?: ForceMergeTypes<Names, RouteRecordRaw["name"]>;
};

type RoutesRecord = ExtendedRouteRecordBase & RouteRecordRaw;

const routes: Array<RoutesRecord> = [
  {
    path: "/",
    name: "Root",
    component: null,
    children: [],
  },
  {
    path: "/somePath",
    name: "somePath1",
    component: null,
    children: [],
  },
  {
    path: "/somePath2",
    name: "somePath2",
    component: null,
    children: [],
  },
];

export function findRouteByName(name: (typeof routes)[number]["name"]) {
  return routes.find((route) => route.name === name);
}

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

findRouteByName("");

export default router;

字符串
使用这种方法,您可以为pathname提供任何字符串,并且还可以为添加到PathNames类型的字符串获得intellisense。让我知道如果我错过了什么或者如果不符合您的要求。


的数据

**注意:**您可能无法在Stackblitz中获得智能感知,但是,您可以在IDE中获得它,如VSCode。这是因为Stackblitz的限制。

相关问题