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

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


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

目录
相关文章
|
4月前
|
C++
stl判断数据的类型
stl判断数据的类型
|
9月前
🎖️typeScrpt中如何使用条件类型和泛型?
我将通过一个可能对日常使用非常有帮助的代码示例更深入地介绍泛型。
47 1
|
11月前
|
安全
运算符:指数-链判断-Null判断-逻辑赋值
运算符:指数-链判断-Null判断-逻辑赋值
52 0
|
JavaScript 前端开发
不同类型的循环
不同类型的循环
56 0
|
存储 算法 NoSQL
实战:第十九章:存入Long类型对象,在代码中使用Long类型接收,结果报类型转换错误
实战:第十九章:存入Long类型对象,在代码中使用Long类型接收,结果报类型转换错误
102 0
实战:第十九章:存入Long类型对象,在代码中使用Long类型接收,结果报类型转换错误
判断Object中数据类型(已知类型、未知类型))
判断Object中数据类型(已知类型、未知类型))
108 0
lodash判断值是否是原始有限数值
lodash判断值是否是原始有限数值
61 0
ML之DS:仅需一行代码实现对某字段下的所有数值实现同一机制的改变或转换(比如全部转为str类型/全部取平方值)
ML之DS:仅需一行代码实现对某字段下的所有数值实现同一机制的改变或转换(比如全部转为str类型/全部取平方值)
ML之DS:仅需一行代码实现对某字段下的所有数值实现同一机制的改变或转换(比如全部转为str类型/全部取平方值)
|
Java
编写Java程序,通过给定可变参数方法,计算任意给定的多个int类型数据之和
编写Java程序,通过给定可变参数方法,计算任意给定的多个int类型数据之和
211 0
运算符优先顺序(包含类型说明)
运算符优先顺序(包含类型说明)
150 0
运算符优先顺序(包含类型说明)