TypeScript編寫(xiě)自動(dòng)創(chuàng)建長(zhǎng)度固定數(shù)組的類(lèi)型工具詳解
前言
在 TypeScript
中,當(dāng)需要一個(gè)長(zhǎng)度固定的數(shù)組時(shí),通常會(huì)想到使用元組來(lái)進(jìn)行表示,不過(guò)相對(duì)于數(shù)組而言,元組的每個(gè)元素的類(lèi)型都不必是一致的。
如果現(xiàn)在需要一個(gè)長(zhǎng)度為 30
,元素類(lèi)型為 string
的數(shù)組類(lèi)型,其實(shí)就是一個(gè)元組,如果直接手寫(xiě)出來(lái),那也太麻煩了,本文因此有感而發(fā),編寫(xiě)了自動(dòng)創(chuàng)建的類(lèi)型工具。
代碼
首先,不管三七二十一,先把這個(gè)類(lèi)型工具給定義出來(lái):
type FixedArray = any
然后開(kāi)始逐步分析,先從泛型下手:
- 因?yàn)殚L(zhǎng)度是可以指定了,所以必定接受一個(gè)泛型
Len
用于表示數(shù)組長(zhǎng)度; - 而且因?yàn)槭菙?shù)組,必須得要指定數(shù)組的類(lèi)型,所以還有一個(gè)數(shù)組類(lèi)型的泛型
T
; - 因?yàn)?
TypeScript
中的遍歷生成,一般都是使用遞歸實(shí)現(xiàn)的,所以還得有第三個(gè)參數(shù),用于接受上一次執(zhí)行后得到的數(shù)組List
。
綜上,這個(gè)類(lèi)型工具加上泛型之后,如下:
type FixedArray<T = any, Len extends number = 6, List extends Array<T> = []> = any
接下去的步驟就很簡(jiǎn)單了,判斷 List
的長(zhǎng)度是否等于 Len
,是的話(huà),就直接返回 List
,不是的話(huà),將 List
和一個(gè)新的元素組成新的數(shù)組,把這個(gè)數(shù)組作為泛型,傳入遞歸調(diào)用的 FixedArray
即可。
判斷 List 的長(zhǎng)度是否等于 Len
思路很簡(jiǎn)單,關(guān)鍵點(diǎn)在于如何判斷 List
的長(zhǎng)度是否等于 Len
?
根據(jù)上面的定義,Len
是 number
類(lèi)型的字面量,對(duì)于字面量而言,若是使用 extends
判斷其子類(lèi)型,只有 never
和其本身能夠滿(mǎn)足,所以只要排除掉 Len
是 never
的情況,剩下的只要判斷 List['length']
是否 extends Len
即可。
還有一點(diǎn),因?yàn)?Len
是 extends number
的,所以傳入 number
也是合法的,但是會(huì)造成死循環(huán),所以也需要排除掉 Len
是 number
本身的情況,綜上,判斷 Len
是否是合法的 number
字面量的類(lèi)型工具如下,比較簡(jiǎn)單,不在贅述:
//判斷是否為 never 的類(lèi)型工具 type IsNever<T> = [T] extends [never] ? true : false // 用于判斷兩個(gè)泛型是否相同,只要一個(gè)泛型傳入 Len, 零一個(gè)泛型傳入 number,就能判斷 Len 是否為 number 本身 type IsTypeSelf<TA, TB> = TA extends TB ? TB extends TA ? true : false : false // 判斷 Len 是否為合法的 number 字面量類(lèi)型 type IslegalNumber<N> = IsNever<N> extends true ? false : IsTypeSelf<number, N> extends true ? false : true
那么在 FixedArray
中,先判斷 Len
是否合法,不合法直接返回 List
:
type FixedArray<T = any, Len extends number = 6, List extends Array<T> = []> = IslegalNumber<Len> extends false // 判斷 Len 是否合法 ? List : any
然后再判斷 List['length']
是否 extends Len
即可,如果是,返回 List
,如果不是,將 List
和一個(gè)新的元素組成新的數(shù)組,把這個(gè)數(shù)組作為泛型,傳入遞歸調(diào)用的 FixedArray
:
type FixedArray<T = any, Len extends number = 6, List extends Array<T> = []> = IslegalNumber<Len> extends false ? List : List['length'] extends Len // 判斷 `List['length']` 是否等于 `Len` ? List // 是就返回 List 本身 : FixedArray<T, Len, [...List, T]> // 不是就遞歸,注意傳入的數(shù)組添加了新的元素 T
測(cè)試一下:
type FixedArrayInstance = FixedArray<string, 30>
可以看到,生成了一個(gè)長(zhǎng)度為30
,元組類(lèi)型都為 string
的元組。
以上就是TypeScript編寫(xiě)自動(dòng)創(chuàng)建長(zhǎng)度固定數(shù)組的類(lèi)型工具詳解的詳細(xì)內(nèi)容,更多關(guān)于TypeScript自動(dòng)創(chuàng)建長(zhǎng)度固定數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- TypeScript 數(shù)組Array操作的常用方法
- TypeScript數(shù)組的定義與使用詳解
- typeScript中數(shù)組類(lèi)型定義及應(yīng)用詳解
- TypeScript實(shí)現(xiàn)數(shù)組和樹(shù)的相互轉(zhuǎn)換
- TypeScript調(diào)整數(shù)組元素順序算法
- TypeScript中Array(數(shù)組)聲明與簡(jiǎn)單使用方法
- TypeScript之元組、數(shù)組及as?const的使用
- TypeScript判斷兩個(gè)數(shù)組的內(nèi)容是否相等的實(shí)現(xiàn)
- TypeScript數(shù)組實(shí)現(xiàn)棧與對(duì)象實(shí)現(xiàn)棧的區(qū)別詳解
- TypeScript之元組、數(shù)組、多維數(shù)組定義方法以及 as const說(shuō)明
相關(guān)文章
微信小程序 實(shí)現(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件
這篇文章主要介紹了微信小程序 實(shí)現(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件的相關(guān)資料,需要的朋友可以參考下2017-04-04使用純JavaScript封裝一個(gè)消息提示條功能示例詳解
這篇文章主要為大家介紹了使用純JavaScript封裝一個(gè)消息提示條功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02微信小程序 詳解頁(yè)面跳轉(zhuǎn)與返回并回傳數(shù)據(jù)
這篇文章主要介紹了微信小程序 詳解頁(yè)面跳轉(zhuǎn)與返回并回傳數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-02-02Hardhat進(jìn)行合約測(cè)試環(huán)境準(zhǔn)備及方法詳解
這篇文章主要為大家介紹了Hardhat進(jìn)行合約測(cè)試環(huán)境準(zhǔn)備及方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03WindiCSS實(shí)現(xiàn)加載windi.config.ts配置文件詳解
這篇文章主要為大家介紹了WindiCSS實(shí)現(xiàn)加載windi.config.ts配置文件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02網(wǎng)頁(yè)的標(biāo)準(zhǔn),IMG不支持onload標(biāo)簽怎么辦
網(wǎng)頁(yè)的標(biāo)準(zhǔn),IMG不支持onload標(biāo)簽怎么辦...2006-06-06