Type 'undefined' cannot be used as an index type in TS

avatar

Borislav Hadzhiev

Tue Mar 08 20222 min read

banner

Photo by Kari Shea

Type 'undefined' cannot be used as an index type in TS #

The "Type 'undefined' cannot be used as an index type" error occurs when a value that is possibly undefined is used to index an object or array. To solve the error, use a type guard to make sure the value is not undefined before indexing the object or array.

Here is an example of how the error occurs.

index.ts
// 👇️ key is optional (could be undefined) const obj1: { key?: string } = { key: 'name', }; const obj2 = { name: 'James Doe', }; // ⛔️ Error: Type 'undefined' cannot be // used as an index type.ts(2538) const result = obj2[obj1.key];

We used a question mark to mark the key property as optional in the obj1 variable.

This means that the obj1.key property could be a string or it could have an undefined value.

With the error message, TypeScript tells us that we can't use an undefined value to index the object.

To solve the error, we have to conditionally check that the value is not undefined before accessing the property.

index.ts
// 👇️ key is optional (could be undefined) const obj1: { key?: string } = { key: 'name', }; const obj2 = { name: 'James Doe', }; const result = obj1.key != undefined ? obj2[obj1.key as keyof typeof obj2] : ''; console.log(result); // 👉️ "James Doe"

We used a ternary operator to check if the obj1.key property is not nullish (null or undefined) before accessing the specific property in the object.

If the property is nullish, we simply return fallback value of a string.

You can also use a simple if statement that serves as a type guard.

index.ts
const obj1: { key?: string } = { key: 'name', }; const obj2 = { name: 'James Doe', }; let result = ''; if (obj1.key != undefined) { result = obj2[obj1.key as keyof typeof obj2]; } console.log(result); // 👉️ "James Doe"

The obj1.key property is guaranteed to be a string in the if block, so we can safely use it as an index type.

The error also occurs when you have a possibly undefined value with which you're trying to index an array.

index.ts
const arr = ['a', 'b', 'c']; const num: number | undefined = Math.random() > 0.5 ? 0 : undefined; // ⛔️ Error: Type 'undefined' cannot be // used as an index type.ts(2538) arr[num];

The num variable can store a number or an undefined value and TypeScript won't let us index the array with an undefined value.

index.ts
const arr = ['a', 'b', 'c']; const num: number | undefined = Math.random() > 0.5 ? 0 : undefined; if (num != undefined) { const result = typeof num !== undefined ? arr[num] : ''; console.log(result); // 👉️ "a" }

The num variable is guaranteed to be a number in the if block, so we can safely access the array at the specific index.

If none of the solutions above work, and you are certain the value is a number, you can use a type assertion.

index.ts
const arr = ['a', 'b', 'c']; const num: number | undefined = 1; const result = arr[num as number]; // 👈️ type assertion console.log(result); // 👉️ "b"

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that the num variable will be a number and not to worry about it.

Use the search field on my Home Page to filter through my more than 1,000 articles.