Duplicate index signature for type 'string' in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 8, 2022

banner

Photo from Unsplash

Duplicate index signature for type 'string' in TypeScript #

The "Duplicate index signature for type 'string'" error occurs when we have multiple index signatures for string keys in the same type. To solve the error, only use a single index signature for string keys in a type.

Here is an example of how the error occurs.

index.ts
type Person = { // ⛔️ Duplicate index signature for type 'string'.ts(2374) [name: string]: string; [country: string]: string; }; const obj: Person = { name: 'Tom', country: 'Chile', };

The Person type has 2 index signatures for keys of type string, which causes the error.

The [name: string]: string syntax is an index signature and means that when the object is indexed with a string key, it will return a string.

We can't have multiple index signatures for string keys in a type, because they conflict.

To solve the error, only use a single index signature for string keys in the type.

index.ts
type Person = { // 👇️ only 1 index signature [key: string]: string | number | number[]; name: string; country: string; }; const obj: Person = { name: 'Tom', country: 'Chile', }; obj.years = [2022, 2023, 2024]; // 👇️ {name: 'Tom', country: 'Chile', years: [2022, 2023, 2024]} console.log(obj);

We used only one index signature for string keys in the Person type.

The index signature in the example means that when an object is indexed with a string key, it will return a value of type string or number or number[].

Now we can set any property on the object that has a value of string, number or number[].

Index signatures are used when we don't know all the names of a type's properties ahead of time, but we know the shape of the values.

In the example, we specified that when the object is indexed with a string key, it returns a value of type string, number or number[].

This means that you can't add string properties of another type on the object, e.g. a property with a string key that returns a boolean.

index.ts
type Person = { [key: string]: string | number | number[]; name: string; country: string; // ⛔️ Error: Property 'isProgrammer' of type // 'boolean' is not assignable to 'string' index // type 'string | number | number[]'.ts(2411) isProgrammer: boolean; };

We tried to add an isProgrammer property to the Person type that has a value of boolean.

The problem here is - we've already specified that when an object of type Person gets indexed with a string key, it will return a value of type string or number or number[].

We can't add another string key that points to a boolean value, without adding it to the types in the index signature.

index.ts
type Person = { [key: string]: string | number | number[] | boolean; name: string; country: string; isProgrammer: boolean; }; const obj: Person = { name: 'Tom', country: 'Chile', isProgrammer: true, }; obj.years = [2022, 2023, 2024];

We solved the error by adding the boolean type to the index signature.

When using index signatures in TypeScript, it all comes down to understanding that the index signature for string keys has to cover all of the types a string key might point to in the object.

You can't have multiple index signatures for string keys in the same type, because they conflict. You have to use a union type, e.g. string | number | boolean.

Conclusion #

The "Duplicate index signature for type 'string'" error occurs when we have multiple index signatures for string keys in the same type. To solve the error, only use a single index signature for string keys in a type.

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.