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

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


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

目录
相关文章
|
7月前
|
存储 编译器 C语言
【C/C++ 函数返回的奥秘】深入探究C/C++函数返回:编译器如何处理返回值
【C/C++ 函数返回的奥秘】深入探究C/C++函数返回:编译器如何处理返回值
688 3
|
7月前
|
存储 算法 编译器
【C++ 函数尾部返回】C++中的尾返回类型:探究auto func() -> ReturnType的魔力
【C++ 函数尾部返回】C++中的尾返回类型:探究auto func() -> ReturnType的魔力
215 1
|
23天前
|
存储
在实际编程中,如何选择使用元组还是列表来返回多个值?
在实际编程中,如何选择使用元组还是列表来返回多个值?
31 2
|
7月前
|
C++
stl判断数据的类型
stl判断数据的类型
🎖️typeScrpt中如何使用条件类型和泛型?
我将通过一个可能对日常使用非常有帮助的代码示例更深入地介绍泛型。
77 1
|
JavaScript 前端开发
javascript:将数组转为字符串通过判断包含字段进行状态判断的解决方案
javascript:将数组转为字符串通过判断包含字段进行状态判断的解决方案
56 0
|
存储 Web App开发 安全
检查 malloc 函数返回内容的四个理由
检查 malloc 函数返回内容的四个理由
|
前端开发
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值
83 0
|
测试技术
【类型挑战】获取函数返回类型,难度⭐️⭐️
【类型挑战】获取函数返回类型,难度⭐️⭐️
149 0
【类型挑战】获取函数返回类型,难度⭐️⭐️
运算符优先顺序(包含类型说明)
运算符优先顺序(包含类型说明)
181 0
运算符优先顺序(包含类型说明)