Using object of object type in Typescript

Using object of object type in Typescript

As you may already know it is quite easy to specify an Array of objects in your type in typescript. Let me give an example.

type People={
  name:string;
  age:number;
  height:string;
}
const peopleArray:People[] = [{
  name: "john doe",
  age: 16,
  height: "1.7m"
},
{
  name: "mohn moe",
  age: 18,
  height: "1.9m"
}]

From the example above you can see it's easy to specify an Array of objects, and this is archivable by specifying the type for the object like the People type above and specifying the type in the peopleArray by adding square brackets after adding the type like this const peopleArray:People[] what you are trying to say is that I am going to give you an Array containing the people object. But the issue is you can't do the same if you wanted an object containing People type. Though in a normal sense it will be quite logical to write const peopleArray:People{}, meaning you are saying I am going to give you an Object containing Objects of People type, but it does not work like that.

One quick thing to keep in mind while we could not specify object of object how we specify array of object is because array don't need keys but object do need key. Let me show you what I am trying to say for array you can write

[{name:"john"},{name:"doe"}]

but for object you have to specify the key, like this

{person1:{name:"john"},person2:{name:"doe"}}

Because this is the correct syntax for an object, but if you then try to write an Object like an Array

{{name:"john"},{name:"doe"}}

Then this will be completely wrong.

Now I am going to show you how to write an object of object type in Typescript. Firstly you are going to specify how you want the inner object to look. For you to completely understand, I am going to use the same object type as the array above

type People={
  name:string;
  age:number;
  height:string;
}

then you will specify another object type that will serve as the main object, but since objects need key we will specify it like this

 type PeopleMainObject = {
  [key: string]: People;
};

What the above code is trying to say is that type PeopleMainObject is an object that will receive a string parameter whose value is going to be an Object of type People. Putting everything together.

type People={
  name:string;
  age:number;
  height:string;
};
 type PeopleMainObject = {
  [key: string]: People;
};
const peopleObject:PeopleMainObject ={
person1:{
  name: "john doe",
  age: 16,
  height: "1.7m"
},
person2:{
  name: "mohn moe",
  age: 18,
  height: "1.9m"
}
}

And with this I hope you now understand how to use an object of object in Typescript. Mind you the same can be done with interface too, just change the type keyword to interface, like this

interface People={
  name:string;
  age:number;
  height:string;
};
 interface PeopleMainObject = {
  [key: string]: People;
};
const peopleObject:PeopleMainObject ={
person1:{
  name: "john doe",
  age: 16,
  height: "1.7m"
},
person2:{
  name: "mohn moe",
  age: 18,
  height: "1.9m"
}
}

Thanks for reading...