TypeScript中条件类型精读与实践记录


Posted in Javascript onOctober 05, 2021

在大多数程序中,我们必须根据输入做出决策。TypeScript 也不例外,使用条件类型可以描述输入类型与输出类型之间的关系。

用于条件判断时的 extends

当 extends 用于表示条件判断时,可以总结出以下规律

若位于 extends 两侧的类型相同,则 extends 在语义上可理解为 ===,可以参考如下例子:

type result1 = 'a' extends 'abc' ? true : false // false
type result2 = 123 extends 1 ? true : false     // false

若位于 extends 右侧的类型包含位于 extends 左侧的类型(即狭窄类型 extends 宽泛类型)时,结果为 true,反之为 false。可以参考如下例子:

type result3 = string extends string | number ? true : false // true

当 extends 作用于对象时,若在对象中指定的 key 越多,则其类型定义的范围越狭窄。可以参考如下例子:

type result4 = { a: true, b: false } extends { a: true } ? true : false // true

在泛型类型中使用条件类型

考虑如下 Demo 类型定义:

type Demo<T, U> = T extends U ? never : T

结合用于条件判断时的 extends,可知 'a' | 'b' | 'c' extends 'a' 是 false, 因此 Demo<'a' | 'b' | 'c', 'a'> 结果是 'a' | 'b' | 'c' 么?
查阅官网,其中有提到:

When conditional types act on a generic type, they become distributive when given a union type.

即当条件类型作用于泛型类型时,联合类型会被拆分使用。即 Demo<'a' | 'b' | 'c', 'a'> 会被拆分为 'a' extends 'a'、'b' extends 'a'、'c' extends 'a'。用伪代码表示类似于:

function Demo(T, U) {
  return T.map(val => {
    if (val !== U) return val
    return 'never'
  })
}

Demo(['a', 'b', 'c'], 'a') // ['never', 'b', 'c']

此外根据 never 类型的定义 —— never 类型可分配给每种类型,但是没有类型可以分配给 never(除了 never 本身)。即 never | 'b' | 'c' 等价于 'b' | 'c'。

因此 Demo<'a' | 'b' | 'c', 'a'> 的结果并不是 'a' | 'b' | 'c' 而是 'b' | 'c'。

工具类型

心细的读者可能已经发现了 Demo 类型的声明过程其实就是 TypeScript 官方提供的工具类型中 Exclude<Type, ExcludedUnion> 的实现原理,其用于将联合类型 ExcludedUnion 排除在 Type 类型之外。

type T = Demo<'a' | 'b' | 'c', 'a'> // T: 'b' | 'c'

基于 Demo 类型定义,进一步地还可以实现官方工具类型中的 Omit<Type, Keys>,其用于移除对象 Type
中满足 keys 类型的属性值。

type Omit<Type, Keys> = {
  [P in Demo<keyof Type, Keys>]: Type<P>
}

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type T = Omit<Todo, 'description'> // T: { title: string; completed: boolean }

逃离舱

如果想让 Demo<'a' | 'b' | 'c', 'a'> 的结果为 'a' | 'b' | 'c' 是否可以实现呢? 根据官网描述:

Typically, distributivity is the desired behavior. To avoid that behavior, you can surround each side of the extends keyword with square brackets.

如果不想遍历泛型中的每一个类型,可以用方括号将泛型给括起来以表示使用该泛型的整体部分。
type Demo<T, U> = [T] extends [U] ? never : T

type Demo<T, U> = [T] extends [U] ? never : T

// result 此时类型为 'a' | 'b' | 'c'
type result = Demo<'a' | 'b' | 'c', 'a'>

在箭头函数中使用条件类型

在箭头函数中使用三元表达式时,从左向右的阅读习惯导致函数内容区若不加括号则会让使用方感到困惑。比如下方代码中 x 是函数类型还是布尔类型呢?

// The intent is not clear.
var x = a => 1 ? true : false

在 eslint 规则 no-confusing-arrow 中,推荐如下写法:

var x = a => (1 ? true : false)

在 TypeScript 的类型定义中,若在箭头函数中使用 extends 也是同理,由于从左向右的阅读习惯,也会导致阅读者对类型代码的执行顺序感到困惑。

type Curry<P extends any[], R> =
  (arg: Head<P>) => HasTail<P> extends true ? Curry<Tail<P>, R> : R

因此在箭头函数中使用 extends 建议加上括号,对于进行 code review 有很大的帮助。

type Curry<P extends any[], R> =
  (arg: Head<P>) => (HasTail<P> extends true ? Curry<Tail<P>, R> : R)

结合类型推导使用条件类型

在 TypeScript 中,一般会结合 extends 来使用类型推导 infer 语法。使用它可以实现自动推导类型的目的。比如用其来实现工具类型 ReturnType<Type> ,该工具类型用于返回函数 Type 的返回类型。
type ReturnType<T extends Function> = T extends (...args: any) => infer U ? U : never

type ReturnType<T extends Function> = T extends (...args: any) => infer U ? U : never

MyReturnType<() => string>          // string
MyReturnType<() => Promise<boolean> // Promise<boolean>

结合 extends 与类型推导还可以实现与数组相关的 Pop<T>、Shift<T>、Reverse<T> 工具类型。

Pop<T>:

type Pop<T extends any[]> = T extends [...infer ExceptLast, any] ? ExceptLast : never

type T = Pop<[3, 2, 1]> // T: [3, 2]

Shift<T>:

type Shift<T extends any[]> = T extends [infer _, ...infer O] ? O : never

type T = Shift<[3, 2, 1]> // T: [2, 1]

Reverse<T>

type Reverse<T> = T extends [infer F, ...infer Others]
  ? [...Reverse<Others>, F]
  : []

type T = Reverse<['a', 'b']> // T: ['b', 'a']

使用条件类型来判断两个类型完全相等

我们也可以使用条件类型来判断 A、B 两个类型是否完全相等。当前社区上主要有两种方案:

方案一: 参考 issue

export type Equal1<T, S> =
  [T] extends [S] ? (
    [S] extends [T] ? true : false
  ) : false

目前该方案的唯一缺点是会将 any 类型与其它任何类型判为相等。

type T = Equal1<{x:any}, {x:number}> // T: true

方案二: 参考 issue

export type Equal2<X, Y> =
  (<T>() => T extends X ? 1 : 2) extends
  (<U>() => U extends Y ? 1 : 2) ? true : false

目前该方案的唯一缺点是在对交叉类型的处理上有一点瑕疵。

type T = Equal2<{x:1} & {y:2}, {x:1, y:2}> // false

以上两种判断类型相等的方法见仁见智,笔者在此抛砖引玉。

总结

到此这篇关于TypeScript中条件类型精读与实践的文章就介绍到这了,更多相关TypeScript条件类型内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
SSM VUE Axios详解
Ajax实现三级联动效果
Oct 05 #Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 #Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 #Javascript
Javascript设计模式之原型模式详细
JS数组方法some、every和find的使用详情
8个JS的reduce使用实例和reduce操作方式
Oct 05 #Javascript
You might like
thinkphp学习笔记之多表查询
2014/07/28 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
jQuery实现简单评论功能
2020/08/19 jQuery
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Python collections模块的使用方法
2020/10/09 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
中班上学期个人总结
2015/02/12 职场文书
信访工作个人总结
2015/03/03 职场文书
公司转让协议书
2016/03/19 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang