🎖️typeScrpt中如何返回正确的类型?

简介: 条件返回类型确实是 TypeScript 中非常有用的强大功能,它允许您根据参数的类型为函数指定不同的返回类型,从而实现更强的类型安全性。

嗨,大家好!这里是道长王jj~ 🎩🧙‍♂️

条件返回类型确实是 TypeScript 中非常有用的强大功能,它允许您根据参数的类型为函数指定不同的返回类型,从而实现更强的类型安全性。

举例来说,考虑一个自定义的加法函数,它根据传入的参数类型来决定是字符串连接还是数字相加。如果参数是字符串,则连接两个字符串并返回。如果参数是数字,它将两个数字相加并返回总和。

function plus<T extends string | number>(a: T, b: T): T extends string ? string : number {
   
  if (typeof a === 'string' && typeof b === 'string') {
   
    return (a + b) as string; 
    // error:Type 'string' is not assignable to type 'T extends string ? string : number'
  }

  if (typeof a === 'number' && typeof b === 'number') {
   
    return (a + b) as number; 
    // error:Type 'string' is not assignable to type 'T extends string ? string : number'
  }

  throw new Error('Both arguments must be of the same type');
}

const result1 = plus(1, 2); // result1 的类型是 number
const result2 = plus('Hello ', 'World'); // result2 的类型是 string

在此代码中, plus 函数采用两个 T 类型的参数,可以是 stringnumber 。然后,该函数使用条件返回类型来指定返回类型应为字符串(如果为 T extends string ),否则为数字。

但是,在代码中的实现中出现了一个问题:TypeScript 无法正确地推断函数的返回类型。会出现报错。

这是因为在函数签名和条件返回类型中都使用了相同的类型参数 T,导致了循环引用的问题。为了解决这个问题,我们可以引入一个单独的类型参数 R 作为返回类型:

function plus<T extends string | number, R = T extends string ? string : number>(a: T, b: T): R {
   
  if (typeof a === 'string' && typeof b === 'string') {
   
    return (a + b) as R;
  }

  if (typeof a === 'number' && typeof b === 'number') {
   
    return (a + b) as R;
  }

  throw new Error('Both arguments must be of the same type');
}

const result1 = plus(1, 2); // result1 的类型是 number
const result2 = plus('Hello ', 'World'); // result2 的类型是 string

通过引入额外的类型参数 R,我们可以在函数签名和条件返回类型中分别使用不同的类型参数,避免了循环引用问题,并让 TypeScript 正确地推断函数的返回类型。

总之,条件返回类型使得函数的返回类型可以根据参数类型进行推断和限制,从而增强了代码的类型安全性和可读性。


🎉 你觉得怎么样?这篇文章可以给你带来帮助吗?当你处于这个阶段时,你发现什么对你帮助最大?如果你有任何疑问或者想进一步讨论相关话题,请随时发表评论分享您的想法,让其他人从中受益。🚀✨

目录
相关文章
|
缓存 资源调度 前端开发
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
2881 0
|
存储 JavaScript 前端开发
架构-单一代码库-monorepo-pnpm-workspace:基本使用
架构-单一代码库-monorepo-pnpm-workspace:基本使用
1632 0
|
Kubernetes 应用服务中间件 HSF
容器服务 kubernetes(ACK)中应用优雅上下线
容器服务 kubernetes(ACK)中应用优雅上下线
8116 0
|
5月前
|
人工智能 安全 API
上手教程:聊聊怎么用阁下AI的API
上手教程:聊聊怎么用阁下AI的API
|
9月前
|
数据采集 前端开发 API
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了如何实现一个基于Ant Design的数值范围组件,以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明,并提供了效果预览和注意事项。组件支持只能输入数字,具有自定义表单控件封装的特点,同时支持所有InputNumber属性,以适应不同业务场景的需求。
279 0
React - 实现一个基于 Antd 的数值范围组件
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
1098 2
|
11月前
|
Web App开发 网络协议 应用服务中间件
HTTP2.0 从原理到实践,保证把你治得服服帖帖!
HTTP/2 是 HTTP/1.1 的重要升级,通过多路复用、头部压缩、服务器推送等特性显著提升性能与效率。本文详细解析了 HTTP/2 的优势、配置方法及实际应用,涵盖 Nginx/Apache/IIS 配置、curl 测试工具使用,并对比 HTTP/1.1 指出其优化点。同时提醒需注意 HTTPS 支持、客户端兼容性等问题,助你高效掌握并运用 HTTP/2 技术。
1088 5
HTTP2.0 从原理到实践,保证把你治得服服帖帖!
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
API
Vite 中环境变量的配置方法
【10月更文挑战第10天】 Vite 中环境变量的配置方法
1646 2