🎖️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 正确地推断函数的返回类型。

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


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

目录
相关文章
|
JavaScript 前端开发 API
007 Umi 使用 TypeScript 提升开发者体验
007 Umi 使用 TypeScript 提升开发者体验
1440 0
007 Umi 使用 TypeScript 提升开发者体验
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
1171 0
|
Kubernetes 应用服务中间件 HSF
容器服务 kubernetes(ACK)中应用优雅上下线
容器服务 kubernetes(ACK)中应用优雅上下线
7961 0
|
6月前
|
数据采集 前端开发 API
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了如何实现一个基于Ant Design的数值范围组件,以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明,并提供了效果预览和注意事项。组件支持只能输入数字,具有自定义表单控件封装的特点,同时支持所有InputNumber属性,以适应不同业务场景的需求。
207 0
React - 实现一个基于 Antd 的数值范围组件
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
API
Vite 中环境变量的配置方法
【10月更文挑战第10天】 Vite 中环境变量的配置方法
1542 2
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
2194 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
前端开发 JavaScript
Ant-design-vue定制主题色
Ant-design-vue定制主题色
|
网络协议 API 网络安全
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
2609 0
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全,防止传输中被截获,提升用户体验。HTTPS基础保障,JavaScript库如CryptoJS辅助加密,Web Crypto API提供原生加密功能。但前端加密非万能,需结合后端措施,注意算法选择、密钥管理。
375 2

热门文章

最新文章