DEV Community

Cover image for Getting Started with Index Signatures
Karthikeyan
Karthikeyan

Posted on • Originally published at imkarthikeyans.hashnode.dev

Getting Started with Index Signatures

In this blog post we will be learning about a concept in typescript - Index signatures.

What is Index Signatures :

Index signature is used to represent the type of object/dictionary when the values of the object are of consistent types.

Syntax: { [key: KeyType] : ValueType }

Assume that we have a theme object which allows us to configure the color properties that can be used across the application. The values will be consistent of type string. This makes a perfect opportunity **for us to **apply index signature.

let colorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: "orange",
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

let’s see how we can add type definition for the below dictionary

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "r...

Enter fullscreen mode Exit fullscreen mode

Playground Link

*What if we try to add a value of different type other than the type defined in the index signature ?
*

If we try to add a value of type number then typescript starts shouting. Take a look at the example below

https://media.giphy.com/media/l3vR9RE5XzmCeuk6c/giphy.gif

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: 1231313,
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

In the above example , we have defined the type of the value in the index signature to be string but for the key main we gave the value as 1231313 which is a number.

The error which we will be getting from typescript,

(property) main: number
Type 'number' is not assignable to type 'string'.(2322)
input.tsx(61, 7): The expected type comes from this index signature.
Enter fullscreen mode Exit fullscreen mode

How do we solve the above error. We modify the type definition of ColorsTheme to accept a string or number .

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string | number 
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: 1231313,
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

Note: However, properties of different types are acceptable if the index signature is a union of the property types — Typescript docs

interface NumberOrStringDictionary {
    [index: string]: number | string | boolean;
    length: number; 
    name: string; 
    isVisible: boolean; 

}
Enter fullscreen mode Exit fullscreen mode

*What if we try to add the key other than a string or number or symbol for index signature ?
*

If we try to add type as boolean for key in the index signature , typescript starts shouting again because An index signature parameter type must be 'string', 'number', 'symbol', or a template literal type

let foo: {
  [key: boolean] : number // Error : An index signature parameter type must be 'string', 'number', 'symbol', or a template literal type
} 

foo = {
  bar: 1
}
Enter fullscreen mode Exit fullscreen mode

Quick Recap:

Index signature can be used define the type of the object whose values are of consistent types or you don’t know the structure of the object you are dealing with.

Conclusion:

That's pretty much it. Thank you for taking the time to read the blog post. I hope , everyone understood about index signature concept.

If you found the post useful , add ❤️ to it and let me know if I have missed something in the comments section. Feedback on the blog are most welcome.

Let's connect on twitter : (Twitter Link)

References:

  1. Typescript Docs 2. Index Signatures in Typescript

Top comments (0)