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> = {  [k in keyof tparams]: `${extract}=${tparams[k]}`;}[keyof tparams];type finalbuildquerystring<t extends record> = joinwithampersand<  uniontotuple<buildquerystring>>;type joinwithampersand = t extends [  infer first extends string,  ...infer rest extends string[]]  ? rest extends []    ? first    : `${first}&${joinwithampersand}`  : "";type fullurl<  tpath extends string,  tparams extends record> = `${tpath}${tparams extends record ? `?${finalbuildquerystring}` : ""}`;function buildstringwithparams(  path: tpath,  params: tparams): fullurl {  // ... 省略实现}

关键变化

主要的改进是引入了 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?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1498293.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:20:25
下一篇 2025年12月19日 20:20:38

相关推荐

  • 使用TypeScript为DOM元素创建可扩展的自定义选择器与方法

    本文探讨了如何在TypeScript环境中为DOM元素创建自定义选择器,并为其添加如addClass等扩展方法,同时优雅地处理Element和NodeList这两种返回类型。我们将详细介绍一种推荐的解决方案,通过类型合并和原型扩展,实现类型安全且功能丰富的DOM操作,避免了不规范的类型断言,提升了代…

    好文分享 2025年12月20日
    000
  • 在TypeScript中创建可扩展的自定义DOM选择器

    本文旨在探讨如何在TypeScript环境中创建功能强大且类型安全的自定义DOM选择器。我们将介绍一种优雅的方法,通过扩展原生Element类型并利用TypeScript的类型系统,实现对单个元素和元素集合(NodeList)的统一操作,并支持自定义方法的链式调用,从而提升前端开发的效率和代码可维护…

    2025年12月20日
    000
  • TypeScript中扩展DOM元素与NodeList:构建自定义选择器与方法

    本文旨在探讨如何在TypeScript中安全有效地扩展原生DOM Element 和 NodeList 类型,以添加自定义方法,如 addClass 或自定义 find 功能。我们将分析 querySelector 和 querySelectorAll 返回类型不一致带来的挑战,并提供一种利用Typ…

    2025年12月20日
    000
  • 使用PHP和AJAX动态更新数据库表数据:从数组值到SQL操作

    本文详细阐述了如何通过PHP和AJAX实现数据库表的动态更新。内容涵盖前端HTML表单(特别是动态生成的下拉菜单)的数据收集、JavaScript将数据封装成数组并通过AJAX发送,以及PHP后端如何接收并安全地处理这些数组值来构建和执行SQL更新语句。重点讲解了SQL字符串的正确引用方式、调试技巧…

    2025年12月20日
    000
  • BOM中如何检测用户的HID设备支持?

    1.检测webhid支持的方法是检查navigator.hid是否存在;2.若存在则使用requestdevice()请求设备并需用户手势触发;3.可通过getdevices()获取已授权设备;4.处理权限拒绝需捕获错误并提供反馈;5.不支持时应提供替代方案。通过if(‘hid&#821…

    2025年12月20日 好文分享
    000
  • 使用 PHP 和 AJAX 更新数据库:处理数组数据与 SQL 语句构建

    本教程详细阐述如何利用 PHP 和 AJAX 技术,将前端收集的表单数据(特别是来自下拉列表的数组值)高效且安全地更新到数据库。文章将涵盖从前端数据收集、通过 AJAX 异步传输到后端 PHP 接收处理,到构建正确的 SQL UPDATE 语句的关键步骤,并强调 SQL 字符串引号处理、调试技巧及数…

    2025年12月20日
    000
  • Node.js模块与局部window变量:理解作用域限制与解决方案

    本教程探讨Node.js环境中,如何让第三方模块(如@braze/web-sdk)使用局部定义的window变量,而非全局window,以避免并发问题。文章深入解析JavaScript的词法作用域原理,解释为何模块无法直接访问调用函数内的局部变量,并指出在不修改模块源码的前提下,此需求通常无法实现。…

    2025年12月20日
    000
  • BOM中如何检测用户的邮件客户端支持?

    浏览器无法直接检测用户电脑上的邮件客户端,根本原因在于安全沙箱和隐私保护机制。1. 浏览器被设计为高度隔离的沙箱环境,禁止网页代码访问本地系统信息,如安装的应用程序。2. 用户隐私受到严格保护,网站不得未经授权获取用户的软件使用情况。3. 邮件处理由操作系统控制,浏览器仅负责将mailto:请求转发…

    2025年12月20日 好文分享
    000
  • JavaScript的XMLHttpRequest是什么?怎么用?

    xmlhttprequest(xhr)在前端与服务器交互中依然有其价值,主要原因有三点:1. 浏览器兼容性极佳,适用于维护老旧项目;2. 提供底层控制能力,如请求进度监听,适合大文件上传等场景;3. 许多旧库基于xhr封装,理解其原理有助于调试和深入掌握网络请求机制。 谈到前端与服务器交互,XMLH…

    2025年12月20日 好文分享
    000
  • TypeScript接口与类型别名的差异:为何接口会引发索引签名错误?

    在TypeScript中,接口(interface)和类型别名(type alias)都用于定义类型,但它们在某些方面存在关键差异,尤其是在处理索引签名时。本文将通过一个具体的例子,解释为什么在使用接口时可能会遇到类型检查错误,而在使用类型别名时却不会。 第一段引用上面的摘要:本文旨在深入探讨Typ…

    2025年12月20日
    000
  • TypeScript 接口与类型别名:为何接口会引发索引签名错误?

    在 TypeScript 中,接口(interface)和类型别名(type alias)都用于定义类型。然而,它们在某些场景下的行为却有所不同,尤其是在处理具有索引签名的类型时。本文将详细解释这种差异,并通过示例代码演示如何解决接口引发的索引签名错误。 以下代码展示了一个典型的场景: const …

    2025年12月20日
    000
  • JavaScript的querySelectorAll方法是什么?如何使用?

    queryselectorall方法返回静态nodelist集合,支持复杂css选择器,不会随dom变化更新。1. 它接受css选择器作为参数,能精准定位元素;2. 返回的nodelist是静态的,文档结构变化不影响其内容;3. 相比getelementsbyclassname/tagname,功能…

    2025年12月20日 好文分享
    000
  • location对象的作用是什么?如何用它操作URL?

    location对象是浏览器提供的全局接口,用于操作和获取当前页面url的信息。它包含属性和方法:1.属性包括href、protocol、host、hostname、port、pathname、search、hash、origin,分别用于获取或设置url各部分;2.方法有assign()(跳转并记…

    2025年12月20日 好文分享
    000
  • async和await在JavaScript中怎么用?有什么作用?

    async和await是javascript中处理异步操作的语法糖,它们简化了promise的使用,使异步代码更直观、可读性更强。1. async函数默认返回一个promise;2. await用于等待promise解决或拒绝,只能在async函数内部使用;3. 使用try…catch可…

    2025年12月20日 好文分享
    000
  • JavaScript的WeakMap是什么?如何使用?

    weakmap是javascript中以对象为键且采用弱引用的特殊map,能避免内存泄漏。其核心特性在于键的弱引用,使对象在无其他强引用时可被垃圾回收。创建weakmap使用new weakmap(),设置键值对用set(),获取值用get(),检查键用has(),删除用delete()。与普通ma…

    2025年12月20日 好文分享
    000
  • JavaScript如何用Object.entries遍历对象

    结论:使用object.entries(obj)可将对象转为键值对数组,便于遍历。1. 它返回形如[[key1, value1], [key2, value2]]的数组,支持用for…of或foreach遍历;2. 可结合map构造函数直接转为map;3. 兼容性较好,老旧浏览器可通过p…

    2025年12月20日 好文分享
    000
  • 通过 JavaScript XMLHttpRequest 发送 GET 请求数据

    本文旨在清晰地阐述如何通过 JavaScript 的 XMLHttpRequest 对象发送带有数据的 GET 请求。由于 GET 请求的特性,直接在请求体中携带数据是不被允许的。本文将详细介绍如何正确地将数据附加到 URL 中,并通过 GET 请求发送至服务器,并避免常见错误。 在 Web 开发中…

    2025年12月20日
    000
  • JavaScript的reduce方法是什么?如何实际应用?

    javascript的reduce方法通过累积数组元素得到一个单一值。它接受一个回调函数和初始值,回调参数包括累加器、当前元素、索引和原数组。1. 若提供initialvalue,则从第一个元素开始处理;否则以第一个元素为初始值,从第二个元素开始。2. 常见用途包括求和、扁平化数组和数据分组。3. …

    2025年12月20日 好文分享
    000
  • TypeScript 接口与类型别名:为何接口会报错?

    本文旨在解释 TypeScript 中接口(interface)与类型别名(type alias)在处理索引签名时的差异,并分析为何在某些情况下,接口会引发类型错误,而类型别名则不会。通过示例代码和详细解释,帮助读者理解 TypeScript 的类型系统及其设计原则。 在 TypeScript 中,…

    2025年12月20日
    000
  • JavaScript的Reflect对象是什么?如何使用?

    reflect对象是javascript中用于元编程的静态工具类,提供了一系列与内部操作对应的方法。1. reflect方法覆盖了属性读取、设置、函数调用等常见操作,并提供更明确的返回结果和错误处理机制;2. 与object方法不同,reflect操作大多返回布尔值指示成功与否,避免抛错或静默失败;…

    2025年12月20日 好文分享
    000

发表回复

登录后才能评论
关注微信