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

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.

Copied!
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.

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.

Copied!
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.

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

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.

Copied!
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.

Copied!
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.