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

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


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

目录
相关文章
|
Kubernetes 应用服务中间件 HSF
容器服务 kubernetes(ACK)中应用优雅上下线
容器服务 kubernetes(ACK)中应用优雅上下线
7704 0
|
SQL 存储 分布式计算
CDP的Hive3系列之Hive Metastore介绍
CDP的Hive Metastore (HMS) 是一种服务,用于在后端 RDBMS(例如 MySQL 或 PostgreSQL)中存储与 Apache Hive 和其他服务相关的元数据。Impala、Spark、Hive 和其他服务共享元存储。与 HMS 的连接包括 HiveServer、Ranger 和代表 HDFS 的 NameNode。
2743 0
CDP的Hive3系列之Hive Metastore介绍
|
存储 NoSQL 关系型数据库
PHP 使用 Redis
10月更文挑战第22天
181 6
|
机器学习/深度学习 监控 自动驾驶
深度学习中的图像识别技术及其应用
【10月更文挑战第20天】本文将探讨深度学习在图像识别领域的应用,包括其原理、关键技术和实践案例。我们将从基础概念出发,逐步深入到模型构建、训练技巧以及性能评估等高级话题。通过实例分析,揭示深度学习如何革新传统图像处理流程,提升识别准确率和效率。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和实用的知识。
|
缓存 Linux 编译器
共享库soname机制
【7月更文挑战第4天】Linux共享库的soname机制管理版本,通过libname.so.x的形式区分主版本。soname(如libname.so.x)在程序编译时被记录,运行时动态链接器依据soname找对应的.so.x文件。linkname(libname.so)用于编译时链接。更新库时,soname不变则不影响已编译程序,新soname则需新旧版本共存。`ldconfig`用于更新系统共享库缓存。
280 3
|
存储 缓存 负载均衡
JVM(Java虚拟机)详解(JVM 内存模型、堆、GC、直接内存、性能调优)
JVM(Java虚拟机)详解(JVM 内存模型、堆、GC、直接内存、性能调优)
69264 9
JVM(Java虚拟机)详解(JVM 内存模型、堆、GC、直接内存、性能调优)
|
人工智能 缓存 网络协议
网络层之三层交换、icmp协议、arp协议
网络层之三层交换、icmp协议、arp协议
|
安全 Java
JAVA反射调用方法
JAVA反射调用方法
|
机器学习/深度学习 人工智能 自然语言处理
基于PAI-QuickStart搭建一站式模型训练服务体验
【8月更文挑战第5天】基于PAI-QuickStart搭建一站式模型训练服务体验
379 0