Index Signatures

Index signatures are a powerful feature in TypeScript that allows you to define types for objects with unknown structures. when you only know the key and value types.

Syntax

The syntax of an index signature is simple and looks similar to the syntax of a property. But with one difference:

• write the type of the key inside the square brackets: { [key: KeyType]: ValueType }

Examples of index signatures

• string type is the key and value

interface StringByString {
  [key: string]: string;
}

const heroesInBooks: StringByString = {
  Gunslinger: "The Dark Tower",
  "Jack Torrance": "The Shining",
};

• The string type is the key, the value can be a string, number, or boolean:

interface Options {
  [key: string]: string | number | boolean;
  timeout: number;
}

const options: Options = {
  timeout: 1000,
  timeoutMessage: "The request timed out!",
  isFileUpload: false,
};

• Options interface also has a field timeout, which works fine near the index signature.
• The key of the index signature can only be a string, number, or symbol.
  Other types are not allowed

When to use index signatures

• There are some great TypeScript compiler settings that will enforce this.When I'm reaching for a known property, I will use dot notation.
• When I'm reaching into a dictionary.I will do something like this, just to make it super clear.
• When you reaching for a unknown property and if the property not exist then it will return undefined. That why we used | undefined in the index signature.

const phones: {
  [key: string]: { country: string; area: string; number: string } | undefined;
  mobile: { country: string; area: string; number: string };
} = {
  home: { country: "+1", area: "211", number: "652-4515" },
  work: { country: "+1", area: "670", number: "752-5856" },
  mobile: { country: "+1", area: "322", number: "525-4357" },
};
console.log(phones.mobile); // known property
console.log(phones["home"]); // un-known property

• Rather declare again unknown property for the mobile we can use the or. This will make the code more readable.But i have also used the string so no need to added the mobile.

const phoneSignature = [key: string | "mobile"]: { country: string; area: string; number: string } | undefined;
const phones:phoneSignature  = {
  home: { country: "+1", area: "211", number: "652-4515" },
  work: { country: "+1", area: "670", number: "752-5856" },
  mobile: { country: "+1", area: "322", number: "525-4357" },
};

Conclusion

An index signature annotation fits well the case when you don't know the exact structure of the object, but you know the key and value types.