[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"
};

 

posted @   Zhentiw  阅读(57)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源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
点击右上角即可分享
微信分享提示