Type 'X' cannot be used as an index type in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 8, 2022

banner

Photo from Unsplash

Type 'X' cannot be used as an index type in TypeScript #

The error "Type cannot be used as an index type" occurs when we try to use a type that cannot be used to index an array or object, e.g. one of the non-primitive types like String. To solve the error, use primitive (lowercase) types, e.g. number or string when typing values.

Here are two examples of how the error occurs.

index.ts
// ✅ With arrays (should be `number`) const num: Number = 1; const arr = ['a', 'b', 'c']; // ⛔️ Error: Type 'Number' cannot be used as an index type.ts(2538) arr[num] // ✅ With objects const obj = { 0: 'a', 1: 'b', 2: 'c', }; // 👇️ should be `number` const num2: Number = 2; // ⛔️ Error: Type 'Number' cannot be used as an index type.ts(2538) obj[num2]

We used the Number, non-primitive object type to type the num and num2 variables, which caused the error.

We can't use the non-primitive types, like Number, String, Boolean or Object as index types.

To solve the error, always use the number, string, boolean, Record, types instead.

index.ts
// 👇️ now using number (lowercase n) const arr1: number[] = [0, 1, 2]; const arr2 = ['a', 'b', 'c']; console.log(arr2[arr1[0]]); // 👉️ "a"

We used the primitive number type which resolved the error.

The error was caused because there is a difference between the primitive number, string and boolean types and the non-primitive Number, String, Boolean, Object, etc.

The non-primitive types are objects and should never be used when typing values in TypeScript.

The TypeScript best practices documentation warns to never use the Number, String, Boolean, Symbol or Object non-primitive objects when typing values in your TypeScript code.

Instead, you should be using number, string, boolean, symbol and Record types.

The error message means that you can't use the specified type when trying to index an array or object in TypeScript.

Here is another example of how the error occurs.

index.ts
interface Person { key: String; // 👈️ should be string } const obj1: Person = { key: 'name', }; const obj2 = { name: 'John Smith', }; // ⛔️ Error: Type 'String' cannot be used as an index type.ts(2538) obj2[obj1.key]

The code snippet above shows how using the String non-primitive, object type causes an error, because it can't be used to index the object at a specific property.

index.ts
interface Person { key: string; // 👈️ using primitive type } const obj1: Person = { key: 'name', }; const obj2 = { name: 'John Smith', }; // ✅ Works console.log(obj2[obj1.key as keyof typeof obj2]); // 👉️ "John Smith"

Using the string primitive type solved the problem.

The cause of the error is shown when you try to assign a value of type String to a value of type string.

index.ts
const str1: String = 'hello world'; // ⛔️ Error: Type 'String' is not // assignable to type 'string'. // 'string' is a primitive, but 'String' // is a wrapper object. Prefer using 'string' when possible. const str2: string = str1;

The capitalized non-primitive objects like String, Number, Boolean, Symbol and Object are not equivalent to string, number, boolean, etc.

Make sure to always use number, string, boolean, symbol and Record instead.

Conclusion #

The error "Type cannot be used as an index type" occurs when we try to use a type that cannot be used to index an array or object, e.g. one of the non-primitive types like String. To solve the error, use primitive (lowercase) types, e.g. number or string when typing values.

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.