如何在TypeScript中将字符串URL转换为对象类型？

你的问题出在原类型仅提取了/后的整个字符串作为单一键，并未拆分多路径中的每个分段。要实现将/path/path2这类URL转换为包含path和path2属性的对象，需要递归拆分路径中的每个分段：

正确的类型定义 #

// 递归拆分路径字符串为单个分段的联合类型
type SplitPath<T extends string> = 
  T extends `${infer First}/${infer Rest}` 
    ? First | SplitPath<Rest> 
    : T extends "" ? never : T;

// 处理带前置/的URL，生成包含所有路径段的对象类型
type TUrl<T extends string> = 
  T extends `/${infer Path}` 
    ? { [K in SplitPath<Path>]: string } 
    : never;

测试示例 #

// 单路径场景
const url1 = "/path" as const;
const obj1 = {} as TUrl<typeof url1>;
obj1.path; // 类型为string，正常访问

// 多路径场景
const url2 = "/path/path2" as const;
const obj2 = {} as TUrl<typeof url2>;
obj2.path; // 正常访问
obj2.path2; // 正常访问

// 多级路径同样支持
const url3 = "/user/profile/settings" as const;
const obj3 = {} as TUrl<typeof url3>;
obj3.user; // 正常
obj3.profile; // 正常
obj3.settings; // 正常

关键说明 #

• SplitPath类型通过条件递归，将path/path2这类字符串拆分为"path" | "path2"的联合类型；
• TUrl类型先提取/后的路径部分，再将拆分后的每个路径段作为对象的键，值类型统一设为string；
• 必须使用as const让TypeScript保留字符串的字面量类型，否则变量会被推断为宽泛的string类型，导致路径拆分失效。

内容的提问来源于stack exchange，提问作者Gustiano