TypeScript函数参数约束与结果推断:如何解决类型推断不准确的问题?

typescript函数参数约束与结果推断:如何解决类型推断不准确的问题?

函数参数约束与结果推断

typescript 中,我们可以定义一个函数,其第二个参数受第一个参数约束,从而在编译时推断出最终的结果。例如,我们需要合并路径和参数的函数,根据路径来约束所传参数,最终拼接路径和参数得出最终字符串。

type path2params = {  '/order/detail': { orderid: string };  '/product/list': { type: string; pagesize: string; pageno: string };};const orderparams: path2params['/order/detail'] = { orderid: '123' };const productlistparams: path2params['/product/list'] = { type: 'electronics', pagesize: '10', pageno: '1' };

理想情况下,通过函数可以推断出 orderurl 为 /order/detail?orderid=123,productlisturl 为 /product/list?type=electronics&pagesize=10&pageno=1。

原始实现和问题

以下是我们自己的实现:

type buildquerystring<tparams extends record> = {  [k in keyof tparams]: `${extract}=${tparams[k]}`;}[keyof tparams];type fullurl<  tpath extends string,  tparams extends record,> = `${tpath}${tparams extends record ? '' : '?'}${buildquerystring}`;function buildstringwithparams(  path: tpath,  params: tparams,): fullurl {  const encodedparams = object.entries(params).map(([key, value]) => {    const encodedvalue = encodeuricomponent(value);    return `${encodeuricomponent(key)}=${encodedvalue}`;  });  const querystring = encodedparams.join('&');  return `${path}${querystring ? '?' : ''}${querystring}` as fullurl;}

然而,原实现存在一些问题:

orderurl 被推断为 /order/detail?orderid=${string},而不是 /order/detail?orderid=123。productlisturl 被推断为联合类型,而不是 /product/list?type=electronics&pagesize=10&pageno=1。

解决方案

以下是如何修改函数以正确推断结果的:

type UnionToIntersection = (U extends any ? (k: U) => void : never) extends (k: infer I) => void  ? I  : never;type UnionToTuple =  UnionToIntersection U : never> extends () => infer R    ? [...UnionToTuple<Exclude>, R]    : [];type JoinWithAmpersand = T extends [  infer First extends string,  ...infer Rest extends string[],]  ? Rest extends []    ? First    : `${First}&${JoinWithAmpersand}`  : '';type FinalBuildQueryString<T extends Record> = JoinWithAmpersand<  UnionToTuple<BuildQueryString>>;type FullUrl<  TPath extends string,  TParams extends Record,> = `${TPath}${TParams extends Record ? `?${FinalBuildQueryString}` : ''}`;// ......const orderUrl = buildStringWithParams('/order/detail', orderParams);const productListUrl = buildStringWithParams('/product/list', productListParams);

修改后的实现使用 uniontointersection 和 uniontotuple 类型的实用程序,将联合类型转换为交集类型和元组,然后使用 joinwithampersand 实用程序将查询字符串参数连接起来。这允许编译器准确地推断 orderurl 和 productlisturl 的结果类型。

以上就是TypeScript函数参数约束与结果推断:如何解决类型推断不准确的问题?的详细内容,更多请关注创想鸟其它相关文章!

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

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

相关推荐

  • 类型系统深入:TypeScript高级类型编程

    TypeScript高级类型通过交叉、联合、条件、映射及递归等特性,实现灵活的类型组合与逻辑判断,提升代码安全性与复用性。 TypeScript 的类型系统远不止基础类型标注。通过高级类型特性,开发者可以构建更安全、可复用且智能的代码结构。掌握这些能力,能让你在复杂项目中游刃有余。 交叉类型与联合类…

    2025年12月20日
    000
  • 函数式编程库Lodash源码解析

    Lodash通过模块化架构、惰性求值机制提升性能,支持函数重载、柯里化与偏应用,结合类型判断与缓存优化,实现高效灵活的工具库设计。 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库,提供了大量对数组、对象、字符串等数据类型的便捷操作方法。其源码设计精巧,充分体现了函数式…

    2025年12月20日
    000
  • 如何通过JavaScript实现高级的浏览器存储方案?

    答案:现代Web开发需结合IndexedDB、统一接口、安全控制与Service Worker实现高效存储。首先使用IndexedDB处理大规模结构化数据,支持事务与索引;其次封装兼容IndexedDB、localStorage及内存的统一存储层,确保降级可用;再通过加密、过期机制和CSP增强安全性…

    2025年12月20日
    000
  • React应用中Swiper组件本地图片路径处理指南

    本教程详细探讨了在react应用中使用swiper组件时,本地背景图片无法正确显示的问题。核心原因在于react项目对静态资源路径的处理机制。文章阐述了如何将图片放置在`public`文件夹中,并通过相对路径或`process.env.public_url`环境变量正确引用这些图片,从而确保swip…

    2025年12月20日 好文分享
    000
  • Google 饼图数据格式化:如何在切片值中显示百分比符号

    本文将详细介绍如何在 google 饼图的切片值和工具提示中正确显示百分比符号。通过利用 google charts 提供的 google.visualization.numberformat 类,开发者可以精确控制数值的显示格式,避免直接在后端数据库查询中进行字符串拼接,从而确保图表的正确渲染和数…

    2025年12月20日
    000
  • 优化 Google 饼图:为切片值添加百分比符号的专业指南

    本教程旨在指导开发者如何在 google 饼图的切片值旁精确地添加百分比符号,从而提升数据可视化效果。文章首先分析了直接在后端进行字符串拼接的局限性,并推荐采用 google charts 内置的 `google.visualization.numberformat` 类进行数据格式化。通过详细的代…

    2025年12月20日
    000
  • Cypress中正确处理元素数量检查与操作:.then()回调与测试设计优化

    本文旨在解决Cypress测试中,如何在`.then()`回调内正确获取jQuery对象的子元素数量,并根据此数量执行后续操作。文章将详细阐述jQuery对象与原生DOM元素属性的区别,提供正确的子元素获取方法,并强调在Cypress测试中避免使用`if-else`条件逻辑的最佳实践,建议通过设置明…

    2025年12月20日
    000
  • 如何使用React Router实现条件式详情页导航

    在构建单页应用时,我们经常会遇到这样的场景:一个导航菜单项指向一个资源列表页(例如 `/persons`),该页面会展示所有可用资源。用户通常可以从列表中选择一个项目,跳转到其详情页(例如 `/persons/:personid`)。然而,当资源列表恰好只包含一个项目时,为了优化用户体验,我们可能希…

    2025年12月20日
    000
  • 获取 nipple.js 虚拟摇杆数据:位置、距离与方向

    本文详细介绍了如何使用 nipple.js 库获取虚拟摇杆的实时位置、距离和方向数据。通过监听摇杆的“move”事件,开发者可以轻松提取摇杆中心、摇杆手柄位置以及移动距离和角度等关键信息,克服了官方文档缺乏实践示例的难题,为游戏或交互式应用开发提供了清晰的实现指导。 理解 nipple.js 的数据…

    2025年12月20日
    000
  • 利用 jQuery 和 this 关键字实现输入字段的实时货币格式化

    本教程详细介绍了如何使用 jquery 和 javascript 的 intl.numberformat api,为具有特定 css 类(如 currency)的多个输入字段实现实时货币格式化功能。通过监听 keyup 事件并巧妙运用 this 关键字,确保用户在任意输入框键入时,系统能精确地格式化…

    2025年12月20日
    000
  • JavaScript WebAssembly集成开发

    集成 WebAssembly 可提升前端性能,适合计算密集型任务。它由 C/C++ 或 Rust 编译生成,通过 Emscripten 等工具构建,与 JavaScript 通过线性内存交互,JS 负责 DOM,Wasm 处理高性能运算,结合使用可发挥各自优势。 JavaScript 与 WebAs…

    2025年12月20日
    000
  • Cypress测试:获取子元素数量与验证动态内容更新的最佳实践

    本教程探讨了在cypress中正确获取dom元素子节点数量的方法,特别是在`cy.then()`回调中处理jquery对象。我们将详细介绍如何使用jquery的`.children()`方法或原生dom属性来获取子元素数量,并强调在测试动态内容增长时,应避免在单个测试中使用`if-else`逻辑,提…

    2025年12月20日
    000
  • JavaScript中根据属性条件移除对象:filter与ES5兼容方案

    本文深入探讨了在javascript中从嵌套对象数组中根据特定属性条件移除元素的有效策略。针对在循环中直接使用`splice`方法修改数组可能导致的索引错位问题,文章提供了两种解决方案:现代javascript中推荐的`array.filter()`方法,以及为兼容旧版es5环境而设计的手动构建新数…

    2025年12月20日
    000
  • TypeScript:为数组实例扩展自定义查找方法

    在typescript中,当需要频繁对数组进行特定条件查找时,重复使用`array.prototype.find()`会导致代码冗余。本文将介绍如何利用`object.assign()`和typescript的类型交叉(intersection types)机制,为特定的数组实例动态添加自定义的查找…

    2025年12月20日
    000
  • JavaScript中从嵌套数组中删除特定对象:现代与兼容性解决方案

    在javascript中,当需要从数组中删除特定对象时,直接在正向循环中使用`splice`方法会导致索引错乱和跳过元素的问题。本文将深入探讨这一常见陷阱,并提供两种高效且可靠的解决方案:针对现代javascript环境推荐使用`array.prototype.filter()`方法,它通过创建新数…

    2025年12月20日
    000
  • JavaScript中的柯里化与部分应用有何区别?

    柯里化将多参数函数转换为单参数函数链,如add(1)(2)(3);部分应用则预设部分参数生成新函数,如partialMultiply(3,4),支持多参数传入。 柯里化和部分应用都涉及将多参数函数转换为更小的函数形式,但它们的实现方式和行为有本质区别。 柯里化(Currying) 柯里化是把一个接受…

    2025年12月20日
    000
  • 深入理解 npm-remote-ls:版本依赖查询的常见陷阱与解决方案

    使用 `npm-remote-ls` 查询远程 npm 包的依赖时,一个常见问题是未能发现预期中的依赖项。这通常是由于查询的包版本与实际包含该依赖的版本不一致所致。本文将通过 `node-gyp` 的案例,详细解析这一现象,并提供准确获取指定版本依赖列表的方法,强调版本匹配在依赖管理中的关键作用。 …

    2025年12月20日
    000
  • JavaScript尾调用优化实现

    尾调用优化虽在ES6中定义,但因主流引擎未完全支持,实际不可依赖;需用循环或trampoline等替代方案避免栈溢出。 JavaScript中的尾调用优化(Tail Call Optimization, TCO)是一种编译器或引擎层面的优化技术,目的是在函数的尾调用场景下避免不必要的栈帧增长,从而防…

    2025年12月20日
    000
  • 使用face-api.js在浏览器中实现多目标人脸识别与Svelte集成

    本教程旨在解决使用face-api.js在svelte项目中进行人脸识别时,多个人脸被错误识别为同一人的问题。文章将深入探讨`labeledfacedescriptors`和`facematcher`的正确构建方法,确保每个已知人脸都能被准确识别。通过详细的代码示例和专业指导,读者将学会如何加载模型…

    2025年12月20日
    000
  • 解决 npm-remote-ls 依赖缺失问题:版本差异的洞察与实践

    在使用 `npm-remote-ls` 检查远程 npm 包依赖时,有时会发现 `package.json` 中明确列出的依赖并未出现在输出中。这通常是由于查询的包版本与 `package.json` 所在的版本不一致导致的。本文将深入探讨这一问题,并通过实例演示如何通过指定正确的版本来获取完整的依…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信