Indexable object in typescript

One of the first obstacles I faced when starting with typescript was that I was unable to dynamically accessing the object key. It is a regular pattern in javascript, and one of the things I found myself searching for a solution to this problem in typescript. So I decided to write about it.

For example, the below code snippet won't work on typescript directly.

type User = {
    name: string,
    age: number,
    hobbies: string[]
}

const person = {
    name: 'Jibin',
    age: 22,
    hobbies: ['games', 'chess', 'reading']
}

Object.keys(person).map(key => {    console.log(person[key]) // No index signature with a parameter of type 'string' was found on type 'User'})

You will need to add an indexable key signature on the type declaring that you can access value based on the object key. The index signature should contain the Type of the key and Type of the value it can return.

console.log(person['name']) // works !!!

let keyName = 'name'
console.log(person[keyName]) // error !!!

Syntax for index signature

type Type = {
    [key: key_type]: return_type
}

So converting our example to accept index access it would be something like this:

type User = {
    name: string,
    age: number,
    hobbies: string[]
    [key: string]: string | number | string[]}

const person:User = {
    name: 'Jibin',
    age: 22,
    hobbies: ['games', 'chess', 'reading']
}

Object.keys(person).map(key => {
    console.log(person[key]) // works now !!!})