Declare an Array with Minimum length in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 1, 2022

banner

Photo from Unsplash

Declare an Array with Minimum length in TypeScript #

Use a tuple to declare an array with minimum length, e.g. let arrMinLength2: [string, string, ...string[]] = ['a', 'b']. Tuple types allows us to express an array with fixed number of elements whose types are known, but can be different.

index.ts
// ✅ First approach let arrMinLength2: [string, string, ...string[]] = ['a', 'b']; arrMinLength2 = ['a', 'b', 'c']; // ✅ OK // ⛔️ Error: Source has 1 element(s) but target requires 2. arrMinLength2 = ['a']; // ✅ Second approach type Tuple3<T> = [T, T, T]; type Tuple6<T> = [...Tuple3<T>, ...Tuple3<T>]; // ⛔️ Source has 2 element(s) but target requires 3. const arrMinLength3: Tuple3<string> = ['a', 'b'];

In the first example, we declared a tuple that has a minimum length of 2 elements of type string.

The ...string[] syntax is called Rest elements in tuple types and indicates that the tuple is open-ended and may have zero or more additional elements of the specified type.

For example, [string, ...boolean[]] means a tuple with a string first element followed by any number of boolean elements.

The tuple can have more than 2 elements, but if you try to re-declare it with less than 2 elements, you'd get an error.

index.ts
let arrMinLength2: [string, string, ...string[]] = ['a', 'b']; arrMinLength2 = ['a', 'b', 'c']; // ✅ OK // ⛔️ Error: Source has 1 element(s) but target requires 2. arrMinLength2 = ['a'];

If you add the correct number of elements to the array, but mix up the types, you'd also get an error.

index.ts
let arrMinLength2: [string, string, ...string[]] = ['a', 'b']; // ⛔️ Error: Type 'number' is not // assignable to type 'string'.ts(2322) arrMinLength2 = ['a', 4]; // ✅ OK

The tuple type is used to express an array with fixed number of elements whose types are known, but can be different.

Having said that, tuples are represented by an array, and you are still able to call the pop() method to remove elements from the tuple.

index.ts
const arrMinLength2: [string, string, ...string[]] = ['a', 'b']; arrMinLength2.pop(); arrMinLength2.pop(); console.log(arrMinLength2); // 👉️ []

If you want to prevent this from happening, you can declare the tuple as readonly.

index.ts
const arrMinLength2: readonly [string, string, ...string[]] = ['a', 'b']; // ⛔️ Error: Property 'pop' does not exist // on type 'readonly [string, string, ...string[]]'.ts(2339) arrMinLength2.pop();

But this also means that you aren't able to change the values of the tuple's elements or add more elements.

Alternatively, you can use the following approach to declare an array with minimum length N.

index.ts
type Tuple3<T> = [T, T, T]; type Tuple6<T> = [...Tuple3<T>, ...Tuple3<T>]; // ⛔️ Source has 2 element(s) but target requires 3. const arrMinLength3: Tuple3<string> = ['a', 'b'];

This is useful when you're working with longer arrays, because you can declare a tuple of N elements and use the spread syntax (...) to unpack the tuple into a new tuple as many times as necessary.

If you need to declare an array that has a maximum length of N, use a tuple with optional values.

index.ts
// ✅ Array of Max length let arrOfMaxLength3: [string?, string?, string?] = []; arrOfMaxLength3 = ['a', 'b', 'c']; // ✅ OK arrOfMaxLength3 = ['a', 'b']; // ✅ OK arrOfMaxLength3 = ['a']; // ✅ OK // ⛔️ Error: Source has 4 element(s) but target allows only 3. arrOfMaxLength3 = ['a', 'b', 'c', 'd'];

The question mark is used to mark the values in the tuple as optional. The tuple in the example can have a maximum of 3 elements (unless you use array methods to add more).

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.