成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

快速掌握 TypeScript 新語(yǔ)法:Infer Extends

開(kāi)發(fā) 前端
Typescript 支持 Infer 類型,可以通過(guò)模式匹配的方式,提取一部分類型返回。但是Infer 提取出的類型是 Unknown,后面用的時(shí)候需要類似和 String 取交叉類型,或者 xxx Extends String 這樣的方式來(lái)轉(zhuǎn)換成別的類型來(lái)用。這樣比較麻煩。

我們知道,TypeScript 支持 infer 來(lái)提取類型的一部分,通過(guò)模式匹配的方式。

比如元組類型提取最后一個(gè)元素的類型:

type Last<Arr extends unknown[]> = 
Arr extends [...infer rest,infer Ele]
? Ele
: never;

圖片

比如函數(shù)提取返回值類型:

type GetReturnType<Func extends Function> = 
Func extends (...args: any[]) => infer ReturnType
? ReturnType
: never;

圖片

比如字符串提取一部分,然后替換:

type ReplaceStr<
Str extends string,
From extends string,
To extends string
> = Str extends `${infer Prefix}${From}${infer Suffix}`
? `${Prefix}${To}${Suffix}` : Str;

圖片

模式匹配就是通過(guò)一個(gè)類型匹配一個(gè)模式類型,需要提取的部分通過(guò) infer 聲明一個(gè)局部變量,這樣就能從局部變量里拿到提取的類型。

infer 的模式匹配用法還是挺好理解的。

但是 infer 有一個(gè)問(wèn)題,比如這樣:

圖片

從 string 數(shù)組中提取的元素,默認(rèn)會(huì)推導(dǎo)為 unknown 類型,這就導(dǎo)致了不能直接把它當(dāng) string 用:

圖片

那怎么辦呢?

之前的處理方式是這樣的:

圖片

加一層判斷,這樣 Last 就推導(dǎo)為 string 類型了。

或者也可以和 string 取交叉類型:

圖片

這樣也可以作為 string 來(lái)用。

但是我們明明知道這里就是 string,卻還需要 & string 或者 xxx extends string 來(lái)轉(zhuǎn)換一次,這也太麻煩了。

TS 也知道有這個(gè)問(wèn)題,所以在 4.7 就引入了新語(yǔ)法:infer extends。

現(xiàn)在我們可以這樣寫(xiě):

圖片

infer 的時(shí)候加上 extends 來(lái)約束推導(dǎo)的類型,這樣推導(dǎo)出的就不再是 unknown 了,而是約束的類型。

這個(gè)語(yǔ)法是 TS 4.7 引入的,在 4.8 又完善了一下。

比如這樣一個(gè)類型:

type NumInfer<Str> = 
Str extends `${infer Num extends number}`
? Num
: never;

在 4.7 的時(shí)候推導(dǎo)結(jié)果是這樣:

圖片

而 4.8 就是這樣了:

圖片

也就是說(shuō) 4.7 的時(shí)候推導(dǎo)出的就是 extends 約束的類型,但是 4.8 的時(shí)候,如果是基礎(chǔ)類型,會(huì)推導(dǎo)出字面量類型。

有了這個(gè)語(yǔ)法之后,除了能簡(jiǎn)化類型編程的邏輯之外,也能實(shí)現(xiàn)一些之前實(shí)現(xiàn)不了的功能:

比如提取枚舉的值的類型:

enum Code {
a = 111,
b = 222,
c = "abc"
}

我們都是這樣寫(xiě):

圖片

但是有的值明明是數(shù)字,卻被作為了字符串,所以要再處理一下,轉(zhuǎn)換成數(shù)字類型,這時(shí)候就可以用 infer extends 了:

type StrToNum<Str> =
Str extends `${infer Num extends number}`
? Num
: Str

做完 string 到 number 的轉(zhuǎn)換,就拿到了我們想要的結(jié)果:

圖片

這就是 infer extends 的第二個(gè)作用。

處理 string 轉(zhuǎn) number 之外,也可以轉(zhuǎn) boolean、null 等類型:

圖片圖片

總結(jié)

Typescript 支持 infer 類型,可以通過(guò)模式匹配的方式,提取一部分類型返回。

但是 infer 提取出的類型是 unknown,后面用的時(shí)候需要類似和 string 取交叉類型,或者 xxx extends string 這樣的方式來(lái)轉(zhuǎn)換成別的類型來(lái)用。這樣比較麻煩。

所以 TS 4.7 實(shí)現(xiàn)了 infer extends 的語(yǔ)法,可以指定推導(dǎo)出的類型,這樣簡(jiǎn)化了類型編程。

而且,infer extends 還可以用來(lái)做類型轉(zhuǎn)換,比如 string 轉(zhuǎn) number、轉(zhuǎn) boolean 等。

要注意的是,4.7 的時(shí)候,推導(dǎo)出的只是 extends 約束的類型,比如 number、boolean,但是 4.8 就能推導(dǎo)出字面量類型了,比如 1、2、true、false 這種。

有了 infer extends,不但能簡(jiǎn)化類型編程,還能實(shí)現(xiàn)一些之前很難實(shí)現(xiàn)的類型轉(zhuǎn)換。

責(zé)任編輯:姜華 來(lái)源: 神光的編程秘籍
相關(guān)推薦

2020-07-29 08:05:42

JavaScriptTypeScript工具

2009-12-09 10:46:06

PHP檢查語(yǔ)法錯(cuò)誤

2024-05-06 09:41:54

TypeScriptextends類型兼容

2021-10-15 10:26:28

鴻蒙HarmonyOS應(yīng)用

2021-08-30 13:00:40

JS代碼前端

2010-03-29 10:45:48

HTML 5

2024-01-24 08:31:13

extends?接口規(guī)范

2022-08-08 09:00:42

TypeScript映射類型

2022-11-04 11:11:15

語(yǔ)言入職項(xiàng)目

2010-06-21 15:33:47

路由信息協(xié)議

2010-09-09 15:32:48

SQL插入數(shù)據(jù)

2020-09-11 06:46:00

TypeScriptJavaScala

2025-05-28 08:25:00

JavaScript代碼開(kāi)發(fā)

2009-11-09 15:06:34

WCF序列化

2023-09-26 01:21:34

2020-04-22 14:15:32

Vue 3.0語(yǔ)法前端

2009-12-11 16:39:08

PHP引號(hào)轉(zhuǎn)義

2009-12-08 15:48:19

PHP文章分頁(yè)

2017-08-07 15:19:30

編程語(yǔ)言快速

2009-12-23 10:20:27

WPF類層次
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)

主站蜘蛛池模板: 99久久精品免费看国产免费软件 | 91视频麻豆 | 国产精品国产 | 久久国产一区二区三区 | 人人擦人人 | 国产精品久久久久久久久久不蜜臀 | 久久精品国产99国产精品 | 色综合久| 天堂一区| 亚洲一区二区av在线 | 亚洲欧美中文字幕在线观看 | 国产在线观看 | 亚洲一区精品在线 | 久久国内精品 | 狠狠亚洲| 亚洲国产成人精品女人久久久 | 有码在线 | 日韩一区二区在线播放 | 久久999 | 精品一区在线 | 国产区久久 | 亚洲精品久久久一区二区三区 | 欧美综合久久久 | 成年免费大片黄在线观看一级 | 日韩欧美三级 | 午夜一区 | 日韩欧美在线观看 | 在线观看精品视频网站 | 在线a视频网站 | 久久99精品久久久久久 | 国产精品视频在线观看 | 亚洲最大福利网 | 久久久www成人免费精品 | 日韩精品一区二区三区中文在线 | 亚洲人成网亚洲欧洲无码 | 久久三区| 欧美色人 | 国产成人精品网站 | 日韩在线观看一区 | 欧美99 | 国产日韩精品在线 |