Tuple type of length has no element at index X in TS

avatar

Borislav Hadzhiev

Last updated: Feb 28, 2022

banner

Photo from Unsplash

Tuple type of length has no element at index X in TS #

The error "Tuple type of length has no element at index" occurs when you declare a tuple in TypeScript and try to access an element at an index that doesn't exist. To solve the error, adjust the length of the tuple or declare a type[] instead.

Here is an example of how the error occurs.

index.ts
const arr: [string] = ['example']; // ⛔️ Error: Tuple type '[string]' of length // '1' has no element at index '1'.ts(2493) console.log(arr[1]);

We declared a tuple that only contains a single element and tried to access th element at index 1.

Indexes of arrays (and tuples) are zero-based, so the tuple doesn't have an element at index 0 and the type checker throws the error.

If you need to declare an array instead of a tuple, use the following syntax.

index.ts
const arr: string[] = ['example']; console.log(arr[1]); // 👉️ undefined

Notice that we declare an array of a specific type as Type[] and not [Type].

Here are examples of how you would declare an array of multiple types and array of objects.

index.ts
// ✅ Array of mixed types const mixedArr: (string | number)[] = ['hello', 100]; // ✅ Array of objects const arrOfObjects: { id: number; name: string }[] = [ { id: 1, name: 'Tom', }, { id: 2, name: 'James', }, ];

If you intended to use a tuple, you would have to adjust the tuple's length or the index at which you're accessing the tuple.

index.ts
const arr: [string, string] = ['hello', 'world']; console.log(arr[1]); // 👉️ "world"

The example above declares a tuple that contains 2 elements of type string.

Tuple types allow us to express an array with a fixed number of elements whose types are known, but can be different.

This is useful, because if you initialize the array incorrectly you'd get an error.

index.ts
// ⛔️ Error: Type 'number' is not // assignable to type 'string'.ts(2322) const arr: [string, string] = ['hello', 100];

When accessing a tuple element at an existing index, TypeScript knows the type of the value.

index.ts
const arr: [string, number] = ['hello', 100]; console.log(arr[0].toUpperCase()); // 👉️ "HELLO" console.log(arr[1].toFixed(2)); // 👉️ 100.00

As we saw, TypeScript also alerts us when we try to access a tuple element at a non-existent index.

index.ts
const arr: [string, number] = ['hello', 100]; // ⛔️ Error: Tuple type '[string, number]' // of length '2' has no element at index '2'.ts(2493) console.log(arr[2]);

If you use the const keyword to declare the tuple, you have to initialize the array with all of the values for which you've specified a type.

index.ts
// ⛔️ Error: Type '[string]' is not // assignable to type '[string, number]'. const arr: [string, number] = ['hello'];

If you don't have all of the necessary values when initializing the array, use the let keyword to declare the tuple.

Conclusion #

The error "Tuple type of length has no element at index" occurs when you declare a tuple in TypeScript and try to access an element at an index that doesn't exist. To solve the error, adjust the length of the tuple or declare a type[] instead.

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.