Solve - Duplicate index signature for type 'string' in TS

avatar

Borislav Hadzhiev

Tue Mar 08 20223 min read

Solve - Duplicate index signature for type 'string' in TS #

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 are able to 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 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.

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