TS 4.7 版本新特性,让 Infer 更简单

开发 前端
你了解 TypeScript infer 的相关知识点么?你知道在条件类型中,如何利用 infer 实现类型推断么?

本文阿宝哥将介绍 TypeScript 4.7 版本引入的一个与 infer 有关的新特性,该特性能够让 infer 类型推断变得更加简洁。在介绍 infer 有关的新特性之前,我们先来看个例子:

type FirstIfString<T> = T extends [infer S, ...unknown[]]
? S extends string
? S
: never
: never;

图片

在以上代码中,FirstIfString 工具类型使用了 TypeScript 的条件类型、条件链和 infer 类型推断。在第一个条件类型中,我们判断类型参数 T 的实际类型是否为非空的元组类型,同时使用 infer 声明了类型变量 S,用于存储模式匹配过程中,所捕获元组类型第一个元素的类型。

而在第二个条件类型中,我们会继续判断类型变量 S 是否为字符串类型的子类型,若条件满足的话,则会返回类型变量 S 所对应的类型,否则所有条件类型的 false 分支都会返回 never 类型。

介绍完 FirstIfString 工具类型的作用之后,我们来验证一下它的功能:

// string
type A = FirstIfString<[string, number, number]>;

// "hello"
type B = FirstIfString<["hello", number, number]>;

// "hello" | "world"
type C = FirstIfString<["hello" | "world", boolean]>;

// never
type D = FirstIfString<[boolean, number, string]>;

图片

由以上结果可知,FirstIfString 工具类型是可以正常使用的。那么现在问题来了,该工具类型内部使用了两个条件类型,我们能否使用一个条件类型来实现同样的功能呢?答案是可以的!TypeScript 4.7 版本允许我们为 infer type 添加可选的 extends 子句,用于指定类型变量的显式约束。

责任编辑:武晓燕 来源: 全栈修仙之路
相关推荐

2021-07-24 13:16:31

Android 代码操作系统

2022-05-09 22:53:02

数组类型TS

2013-05-16 10:33:11

C#C# 5.0Async

2012-06-20 13:36:42

Surface平板

2019-07-10 10:20:36

前端用户体验javascript

2019-04-04 14:05:20

consolejs前端

2009-11-04 15:44:39

ADO.NET Sql

2010-03-23 09:54:35

好压压缩

2009-06-18 15:51:52

SSL VPN负载均衡Array

2020-05-07 10:18:06

JavaScript前端技术

2012-09-25 09:28:36

程序员代码代码整洁

2024-04-26 07:54:07

ZustandReact状态管理库

2015-05-20 12:50:42

C#开发抽象增删改

2020-06-16 13:22:22

AI创新深度学习

2024-02-27 19:22:00

cookieStorCookie事件

2015-07-17 13:45:12

MySQL 5.7

2009-12-18 13:43:07

Ruby 1.9版本

2015-07-17 13:43:09

MySQL 5.7

2024-01-15 00:30:04

Python 3语言版本

2015-07-17 13:27:16

MySQL 5.7
点赞
收藏

51CTO技术栈公众号