[Typescript] Key in union type
Let's say we want to extract query param from string:
type UserPath = "/users/:id";
type UserOrganisationPath = "/users/:id/organisations/:organisationId";
So that:
type tests = [
Expect<Equal<PathParamsObj<UserPath>, { id: string }>>,
Expect<
Equal<
PathParamsObj<UserOrganisationPath>,
{ id: string; organisationId: string }
>
>
];
Sotuion by using ts-toolbelt
type PathParamsObj<TPath extends string> = {
[Key in S.Split<TPath, "/">[number] as Key extends `:${infer Param}`
? Param
: never]: string;
};
Notice that Key in S.Split<TPath, "/">[number]
, need to understand that why we need to add [number]
, inside of just Key in S.Split<TPath, "/">
In javascript
in
operator can be used to map over an array:
const nums = [1,2,3]
for (let num in nums) {
console.log(num) // log out 0,1,2, indexes
}
In Typescript
When using in
with types, it needs to map over union type
instead of array
What S.Split<TPath, "/">
returns is array, to convert array to union, array[number]
results into union type:
S.Split<TPath, "/"> // ["", "users", ":id"]
S.Split<TPath, "/">[number] //"" | "users" | ":id"
Other solution:
type UserPath = "/users/:id";
type UserOrganisationPath = "/users/:id/organisations/:organisationId";
export type MergeObject<T> = { [P in keyof T]: T[P] };
type ExtractPathParams<S extends string> =
S extends `/${string}/:${infer Param}/${infer REST}`
? MergeObject<{ [Key in Param]: string } & ExtractPathParams<`/${REST}`>>
: S extends `${string}/:${infer Param}`
? { [Key in Param]: string }
: never;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2020-12-14 [Java Spring] Controlling API Exposure & Override Endpoint Name
2020-12-14 [Java Spring] Built-in page and sorting
2019-12-14 [Algorithm] 350. Intersection of Two Arrays II
2019-12-14 [Algorithm] 268. Missing Number
2018-12-14 [Algorithm] Linked List Data Structure in JavaScript
2017-12-14 [React] Use Prop Collections with Render Props
2016-12-14 [JS Compse] 4. A collection of Either examples compared to imperative code