[Typescript] Tips: Decode URL search params at the type level with ts-toolbelt
TypeScript's string interpolation powers are incredible, especially since 4.1. Add some utilities from ts-toolbelt, and you've got a stew going.
Here, we decode some URL search params AT THE TYPE LEVEL.
import { String, Union } from "ts-toolbelt";
const query = `/home?a=foo&b=wow`;
type Query = typeof query;
type SecondQueryPart = String.Split<Query, "?">[1]; // a=foo&b=wow
type QueryElements = String.Split<SecondQueryPart, "&">;
type QueryParams = {
[QE in QueryElements[number]]: {
[Key in String.Split<QE, "=">[0]]: String.Split<QE, "=">[1];
};
}[QueryElements[number]];
const obj: Union.Merge<QueryParams> = {
a: "foo",
b: "wow"
};
分类:
TypeScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2017-09-28 [React] Call setState with null to Avoid Triggering an Update in React 16
2017-09-28 [React] Render Elements Outside the Current React Tree using Portals in React 16
2017-09-28 [React] Render Text Only Components in React 16
2016-09-28 [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
2016-09-28 [Angular2 Router] Using snapshot in Router
2016-09-28 [Angular2 Form] Use RxJS Streams with Angular 2 Forms
2015-09-28 [RxJS + AngularJS] Sync Requests with RxJS and Angular