首页 前端 TypeScript 正文

TypeScript 之 条件类型


前言

本文会稍微讲解一下什么是条件类型,以及条件类型的一些简单的使用,并且还有条件类型的升级版本,分布式条件类型,也会介绍一下分布式条件类型的运行步骤。

什么是条件类型 ( Conditional type )

typeScript t提供给我们的,用于确定类型之间关系的一种方式,主要可以用来做类型判断

语法:

T extends U ? X : Y

注意这里的 T,U,X,Y 都是类型占位符,实际上可以是任何类型。

可以这样理解这个语法,当类型 T 可以赋值给 类型 U 的时候,返回类型 X,否则返回类型 Y。

例子

看下面的这段代码来简单的理解一下,这里的 T 是 number 类型, U 是 string 类型,number 类型能够赋值给 string 类型吗,很明显是不可以的,所以返回的是 false 分支的 string 类型。

type A = number extends string ? number : string
// type A = string

并且我们可以结合泛型来实现一些简单的工具类型。

type IsString<T> = T extends string ? true : false

type B1 = IsString<1>
// type B1 = false
type B2 = IsString<'1'>
// type B2 = true
type B3 = IsString<true>
// type B3 = false
type B4 = IsString<undefined>
// type B4 = false

什么是分布式条件类型

当条件类型满足一定条件的时候,就可以称为分布式条件类型,条件有两点。

1.  必须是使用泛型传入的类型才会触发分布式条件类型。

2.  T 必须是一个裸类型,也就是不被比如元组,数组,promise 等 包裹。

满足上面两点就会触发分布式条件类型,当然这个时候还不会分布,只有传入了一个联合类型的时候,才会触发分布。

要是触发了分布式条件类型会造成什么样的结果呢,那下面几个例子来看一下

type IsString<T> = T extends string ? true : false

type B5 = IsString<1|2>
// type B5 = false
type B6 = IsString<1|'1'>
// type B6 = boolean

它们的执行过程分别是:

TypeScript 之 条件类型  第1张

TypeScript 之 条件类型  第2张

实践使用

接下来使用条件类型来实现一个简单的工具类型,用于删除对象中默写键值,这可以用在我们不同的场景可能会有两个很相似的对象,但是缺少了部分属性,这样能够方便我们不用重复定义对象类型。

type RemoveKey<T, Keys extends keyof T> = {
  [P in keyof T as P extends Keys ? never : P]:T[P]
}
// 用于删除对象中的某些键值
type User = {
  name:string,
  age:number,
  sex:number,
}
type User2 = RemoveKey<User,'name'>
// type User2 = {
//     age: number;
//     sex: number;
// }

可以看到结合了重映射和条件类型来实现了这个工具类型,其中要注意的一个知识点就是,当键的值为 never 时,会被直接移除。

总结

本文稍微介绍了条件类型的概念,并且举了一个简单的使用例子,其中使用到了我们之前介绍过的映射类型以及重映射,在之后会介绍更多的 TypeScript 语法,让我们能够实现更多的方便的工具类型。

原文:https://juejin.cn/post/7101680049190862855
打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/5484.html

相关推荐

详解TypeScript中的泛型

详解TypeScript中的泛型

   前言    本文会稍微讲解一下什么是条件类型,以及条件类型的一些简单的使用,并且还有条件类型的升级版本,分布式条件类型...

TypeScript 2022.08.20 0 1086

获取链表中倒数第K个节点

获取链表中倒数第K个节点

   前言    本文会稍微讲解一下什么是条件类型,以及条件类型的一些简单的使用,并且还有条件类型的升级版本,分布式条件类型...

TypeScript 2022.06.01 0 1022

TypeScript 泛型从新手到入门

TypeScript 泛型从新手到入门

   前言    本文会稍微讲解一下什么是条件类型,以及条件类型的一些简单的使用,并且还有条件类型的升级版本,分布式条件类型...

TypeScript 2022.05.31 0 1028

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站