TypeScript全解:類型體操(上)

體操就是做鍛煉,給你的大腦做鍛煉
有沒有什么實(shí)際的意義呢?我覺得沒有,工作中用不到尿贫,只是為了鍛煉而已

if else

JS:

if (A <= B) {
  return true
} else {
  return false
}

TS:

type A = 1
type B = 1 | 2
type Result = A extends B ? true : false

加一點(diǎn)復(fù)雜

JS:

if (A<= B && C<= D) {
  ...
} else {
  ...
}

TS:

type A = 1
type B = 1 | 2
type C = 3
type D = 3 | 4

type Result = A extends B
  ? C extends D
    ? 'true, true'
    : 'true, false'
  : C extends D
    ? 'false, true'
    : 'false, false'

看的出來,沒有 if else踏揣,TS 的代碼很難看
這就是 TS 類型體操的蛋疼之處庆亡,并不是邏輯復(fù)雜,而是看起來復(fù)雜

判斷是否是元組

type A = []
type IsEmptyArray<T exxtends unknown[]> = Arr['length'] extends 0 ? true : false

type Result = IsEmptyArray<A> // TODO: true

infer

還是以上面判斷是否為元組的栗子:

type A = []
type IsEmptyArray<T exxtends unknown[]> = Arr extends [...inter X[], inter D] ? true : false

type Result = IsEmptyArray<A> // TODO: true

這里用 inter “引用”(可以把它當(dāng)做 var)捞稿,等價(jià)于:

type A = []
type IsEmptyArray<T exxtends unknown[]> = Arr extends [...unknown[], unknown] ? true : false

type Result = IsEmptyArray<A> // TODO: true

遞歸

等價(jià)于 for 循環(huán)又谋,但是在 TS 中遞歸有層數(shù)限制(不多),有興趣動(dòng)手可以測(cè)試一下

type A = ['ji', 'ni', 'tai', 'mei']
type Reverse<Arr extends unknown[]> = 
  Arr extends [...infer Rest, inter Last]
    ? [Last, ...Reverse<Rest>]
    : Arr

tytpe Result = Reverse<A> // TODO: ['mei', 'tai', 'ni', 'ji']

模式匹配

合并元組

type A = [1, 2]
type B = [3, string]

type C = [...A, ...B]

獲取元組的最后一項(xiàng)

type Arr = [1, 2, 3, 4]
type Last<T extends unknown[]> = T extends [...Rest, Last] ? Last : never

type L = Last<Arr>

模版字符串

type A = 'A'
type B = 'B'
type C = 'C'

type X  = `${A} ${B} ${C}` // TODO: 'A B C'

沒錯(cuò)娱局,模版字符串在 TS 中也能使用

怎么獲取字符串的第一個(gè)彰亥?沒錯(cuò)還是用模式匹配

type A = 'ji ni tai mei'

type First<T extends string> = T extends `${inter First}${string}` ? F : never

type Result = First<A> // TODO: j

那怎么獲取字符串的最后一項(xiàng)呢?似乎有點(diǎn)麻煩衰齐,也許可能用遞歸能實(shí)現(xiàn)

但是這個(gè)時(shí)候就需要換一種思路了任斋,獲取元組的最后一項(xiàng)非常簡(jiǎn)單,那么直到能把字符串轉(zhuǎn)換成元組就好了(體操最重要的就是思路3芴巍)

type A = 'ji ni tai mei'
type LastOfArr<T extends unknown[]> = T extends  [...inter _, inter Last] ? Last : never

type StringToArr<T extends string> = T extends `${inter F}${inter Rest}` ? [F, ...StringToArr<Rest>] : []
type LastOfString = LastOfArr<StringToArr<A>>
相應(yīng)的也能轉(zhuǎn)換成聯(lián)合類型
type A = 'ji ni tai mei'
type StringToUnion<T extends string> = T extends `${inter F}${inter Rest}` ? F | StringToUnion<Rest> : never

type Result = StringToUnion<A> // TODO: 'j' | 'i' | 'n' | 't' | 'a' | 'm' | 'e'
// TODO: 注意废酷,聯(lián)合類型自動(dòng)去重了
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市抹缕,隨后出現(xiàn)的幾起案子澈蟆,更是在濱河造成了極大的恐慌,老刑警劉巖卓研,帶你破解...
    沈念sama閱讀 216,324評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件趴俘,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)哮幢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門带膀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來志珍,“玉大人橙垢,你說我怎么就攤上這事÷着矗” “怎么了柜某?”我有些...
    開封第一講書人閱讀 162,328評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)敛纲。 經(jīng)常有香客問我喂击,道長(zhǎng),這世上最難降的妖魔是什么淤翔? 我笑而不...
    開封第一講書人閱讀 58,147評(píng)論 1 292
  • 正文 為了忘掉前任翰绊,我火速辦了婚禮,結(jié)果婚禮上旁壮,老公的妹妹穿的比我還像新娘监嗜。我一直安慰自己,他們只是感情好抡谐,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,160評(píng)論 6 388
  • 文/花漫 我一把揭開白布裁奇。 她就那樣靜靜地躺著,像睡著了一般麦撵。 火紅的嫁衣襯著肌膚如雪刽肠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,115評(píng)論 1 296
  • 那天免胃,我揣著相機(jī)與錄音音五,去河邊找鬼。 笑死羔沙,一個(gè)胖子當(dāng)著我的面吹牛躺涝,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播撬碟,決...
    沈念sama閱讀 40,025評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼诞挨,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了呢蛤?” 一聲冷哼從身側(cè)響起惶傻,我...
    開封第一講書人閱讀 38,867評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎其障,沒想到半個(gè)月后银室,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,307評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,528評(píng)論 2 332
  • 正文 我和宋清朗相戀三年蜈敢,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了辜荠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,688評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡抓狭,死狀恐怖伯病,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情否过,我是刑警寧澤午笛,帶...
    沈念sama閱讀 35,409評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站苗桂,受9級(jí)特大地震影響药磺,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜煤伟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,001評(píng)論 3 325
  • 文/蒙蒙 一癌佩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧便锨,春花似錦围辙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至卿叽,卻和暖如春桥胞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背考婴。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評(píng)論 1 268
  • 我被黑心中介騙來泰國(guó)打工贩虾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沥阱。 一個(gè)月前我還...
    沈念sama閱讀 47,685評(píng)論 2 368
  • 正文 我出身青樓缎罢,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親考杉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子策精,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,573評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容