本文提供一个类型安全、简洁健壮的 TypeScript 函数，用于根据嵌套路由对象和点分隔的键路径字符串（如 "r.ACCOUNT.ADDRESSES.DETAIL"），动态拼接出完整的 URL 路径（如 "start/account/addresses/:addressId"）。
本文提供一个类型安全、简洁健壮的 typescript 函数，用于根据嵌套路由对象和点分隔的键路径字符串（如 `"r.account.addresses.detail"`），动态拼接出完整的 url 路径（如 `"start/account/addresses/:addressid"`）。
在现代前端路由系统中，常将路由结构建模为嵌套 JavaScript 对象，其中每个节点通过 HOME 键定义其基础路径片段，子节点则以命名属性形式组织（如 PROFILE、DETAIL）。这种设计兼顾可读性与层级表达力，但需配套工具函数将“路径字符串”映射为真实 URL。下面是一个生产就绪的解决方案。
✅ 核心思路
- 将输入路径（如 "r.ACCOUNT.ADDRESSES.DETAIL"）按 . 分割，校验首段必须为 "r"；
- 逐级遍历对象树：每进入一个子节点前，先追加当前层级的 HOME 值 + /；
- 到达末级时，若该值为字符串（叶子节点），直接使用；若仍为对象（如误传到中间节点但未指定具体子键），则回退取其 HOME —— 这保证了 r.INVENTORY.CATEGORIES 正确返回 .../categories，而非报错。
? TypeScript 实现（含完整类型定义）
type RouteNode = string | { HOME: string; [key: string]: RouteNode | string };
function buildRoute(node: RouteNode, path: string): string {
const keys = path.split(".");
if (keys[0] !== "r") {
throw new Error("Path must start with 'r.'");
}
let result = "";
let current: RouteNode = node;
// 遍历 r 后的所有键（如 ACCOUNT → ADDRESSES → DETAIL）
for (const key of keys.slice(1)) {
if (typeof current !== "object" || current === null || !(key in current)) {
throw new Error(`Invalid path: key '${key}' not found in current route node`);
}
// 断言 current 为对象（因已通过 in 检查且非 string）
const obj = current as Record<string, RouteNode>;
result += obj.HOME + "/";
current = obj[key];
}
// 末级处理：若 current 是字符串，直接用；否则取其 HOME（兼容如 r.INVENTORY.CATEGORIES）
return result + (typeof current === "string" ? current : (current as { HOME: string }).HOME);
}? 使用示例
const r = {
HOME: "start",
ACCOUNT: {
HOME: "account",
PROFILE: "profile",
ADDRESSES: {
HOME: "addresses",
DETAIL: ":addressId",
},
},
ESHOP: {
HOME: "eshop",
INVOICES: "invoices",
ORDERS: {
HOME: "orders",
DETAIL: ":orderId",
},
},
INVENTORY: {
HOME: "warehouse", // 注意：原答案中写为 "inventory"，此处按问题描述统一为 "warehouse"
CATEGORIES: {
HOME: "categories",
CATEGORY: {
HOME: ":categoryId",
PRODUCTS: {
HOME: "products",
PRODUCT: ":productId",
},
},
},
},
};
console.log(buildRoute(r, "r.ACCOUNT.ADDRESSES.DETAIL"));
// → "start/account/addresses/:addressId"
console.log(buildRoute(r, "r.INVENTORY.CATEGORIES"));
// → "start/warehouse/categories"
console.log(buildRoute(r, "r.INVENTORY.CATEGORIES.CATEGORY.PRODUCTS.PRODUCT"));
// → "start/warehouse/categories/:categoryId/products/:productId"⚠️ 注意事项与最佳实践
- 路径格式强约束：函数假设输入始终以 "r." 开头，不支持别名或动态根名；如需扩展，可将根标识符作为参数传入。
- 类型安全提示：RouteNode 类型采用联合类型，准确覆盖“纯路径字符串”与“含 HOME 的子路由对象”两种形态；TypeScript 编译器可据此推导路径合法性。
- 错误防御：对缺失键、非法类型提前抛出语义化错误，便于调试；生产环境可结合 try/catch 做优雅降级。
- 性能考量：时间复杂度为 O(n)，n 为路径深度，无递归调用，避免栈溢出风险，适合高频调用场景（如路由生成、链接预加载）。
该函数轻量（<20 行核心逻辑）、零依赖、开箱即用，是构建声明式路由系统的理想基础设施组件。
