TypeScript中如何根据路径约束参数并推断最终URL？

珍惜时间，勤奋学习！今天给大家带来《TypeScript中如何根据路径约束参数并推断最终URL？》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

ts 中根据第一个参数约束第二个参数并推断结果的函数

在 typescript 中，你想要实现一个能够根据第一个参数约束第二个参数，并推断出最终结果的函数。例如，你希望该函数可以合并路径和参数，根据路径约束所传的参数，最终拼接路径和参数得到最终的字符串。

最初的实现使用了泛型和条件类型，但存在一些问题。本文将介绍一个改进的实现，以满足你的要求，使函数能够直接推断出正确的结果。

改进的实现

我们对 buildstringwithparams 函数进行了一些修改，如下所示：

type path2params = {
  '/order/detail': { orderid: string };
  '/product/list': { type: string; pagesize: string; pageno: string };
};

type buildquerystring<tparams extends record<string, string>> = {
  [k in keyof tparams]: `${extract<k, string>}=${tparams[k]}`;
}[keyof tparams];

type finalbuildquerystring<t extends record<string, string>> = joinwithampersand<
  uniontotuple<buildquerystring<t>>
>;

type joinwithampersand<t extends any[]> = t extends [
  infer first extends string,
  ...infer rest extends string[]
]
  ? rest extends []
    ? first
    : `${first}&amp;${joinwithampersand<rest>}`
  : "";

type fullurl<
  tpath extends string,
  tparams extends record<string, string>
> = `${tpath}${tparams extends record<string, string> ? `?${finalbuildquerystring<tparams>}` : ""}`;

function buildstringwithparams<tpath extends keyof path2params, tparams extends path2params[tpath]>(
  path: tpath,
  params: tparams
): fullurl<tpath, tparams> {
  // ... 省略实现
}

关键变化

主要的改进是引入了 finalbuildquerystring 类型，它使用 joinwithampersand 将查询字符串中的键值对连接起来，并使用 & 符号分隔它们。

此外，我们使用了 uniontotuple 将 buildquerystring 的联合类型转换为元组，然后将它们传递给 joinwithampersand。这确保了查询字符串中的键值对始终按照正确的顺序出现。

使用改进的实现

使用改进的实现，你可以像这样推断出最终结果：

const orderUrl = buildStringWithParams('/order/detail', orderParams); // 推断为 "/order/detail?orderId=123"
const productListUrl = buildStringWithParams('/product/list', productListParams); // 推断为 "/product/list?type=electronics&pageSize=10&pageNo=1"

此实现可以保证在没有运行时开销的情况下推断出类型安全且准确的结果，从而满足你的要求。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《TypeScript中如何根据路径约束参数并推断最终URL？》文章吧，也可关注golang学习网公众号了解相关技术文章。