TypeScript編寫自動建立長度固定陣列的型別工具詳解

2022-08-22 18:02:42

前言

在 TypeScript 中，當需要一個長度固定的陣列時，通常會想到使用元組來進行表示，不過相對於陣列而言，元組的每個元素的型別都不必是一致的。

如果現在需要一個長度為 30，元素型別為 string 的陣列型別，其實就是一個元組，如果直接手寫出來，那也太麻煩了，本文因此有感而發，編寫了自動建立的型別工具。

程式碼

首先，不管三七二十一，先把這個型別工具給定義出來：

type FixedArray = any

然後開始逐步分析，先從泛型下手：

因為長度是可以指定了，所以必定接受一個泛型 Len 用於表示陣列長度；
而且因為是陣列，必須得要指定陣列的型別，所以還有一個陣列型別的泛型 T；
因為 TypeScript 中的遍歷生成，一般都是使用遞迴實現的，所以還得有第三個引數，用於接受上一次執行後得到的陣列 List。

綜上，這個型別工具加上泛型之後，如下：

type FixedArray<T = any, Len extends number = 6, List extends Array<T> = []> = any

接下去的步驟就很簡單了，判斷 List 的長度是否等於 Len，是的話，就直接返回 List，不是的話，將 List 和一個新的元素組成新的陣列，把這個陣列作為泛型，傳入遞迴呼叫的 FixedArray 即可。

判斷 List 的長度是否等於 Len

思路很簡單，關鍵點在於如何判斷 List 的長度是否等於 Len？

根據上面的定義，Len 是 number 型別的字面量，對於字面量而言，若是使用 extends 判斷其子型別，只有 never 和其本身能夠滿足，所以只要排除掉 Len 是 never 的情況，剩下的只要判斷 List['length'] 是否 extends Len 即可。

還有一點，因為 Len 是 extends number 的，所以傳入 number 也是合法的，但是會造成死迴圈，所以也需要排除掉 Len 是 number 本身的情況，綜上，判斷 Len 是否是合法的 number 字面量的型別工具如下，比較簡單，不在贅述：

//判斷是否為 never 的型別工具
type IsNever<T> = [T] extends [never] ? true : false
// 用於判斷兩個泛型是否相同，只要一個泛型傳入 Len, 零一個泛型傳入 number，就能判斷 Len 是否為 number 本身
type IsTypeSelf<TA, TB> = TA extends TB ? TB extends TA ? true : false : false
// 判斷 Len 是否為合法的 number 字面量型別
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 和一個新的元素組成新的陣列，把這個陣列作為泛型，傳入遞迴呼叫的 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]> // 不是就遞迴，注意傳入的陣列新增了新的元素 T

測試一下：

type FixedArrayInstance = FixedArray&lt;string, 30&gt;

可以看到，生成了一個長度為30，元組型別都為 string 的元組。

以上就是TypeScript編寫自動建立長度固定陣列的型別工具詳解的詳細內容，更多關於TypeScript自動建立長度固定陣列的資料請關注it145.com其它相關文章！

TypeScript編寫自動建立長度固定陣列的型別工具詳解

目錄

前言

程式碼

判斷 List 的長度是否等於 Len

熱門文章