Typescript - Tips & Tricks - Index Signature

Welcome back guys, today I'll speak about the "Index Signature". In some cases, we need to create...

#typescript #webdev
Luca Del Puppo Luca Del Puppo
Article Series · Part 9 of 21 TypeScript - Tips & Tricks
View full series (21)
  1. #8 Previous
    Optional modifier
  2. #9 Reading now
    Index Signature
  3. #10 Up next
    readonly modifier
Browse all 21 parts in this series
  1. #1 typeof
  2. #2 Literal Types
  3. #3 keyof
  4. #4 Union and Intersection
  5. #5 Overloaded Functions
  6. #6 this parameter
  7. #7 any vs. unknown
  8. #8 Optional modifier
  9. #9 Index Signature Current
  10. #10 readonly modifier
  11. #11 Readonly Array
  12. #12 Tuple
  13. #13 Non-null assertion operator
  14. #14 Never type
  15. #15 Assert Function
  16. #16 Type Guard
  17. #17 Conditional Type
  18. #18 infer keyword
  19. #19 Mapped Types
  20. #20 Advanced Types
  21. #21 Rest Parameters & Rest Arguments

Welcome back guys, today I’ll speak about the “Index Signature”. In some cases, we need to create some special types like dictionaries. These special types have some keys that identifies the elements and the datas. A simple example:

export type User = {
    name: string,
    email: string;
    session: string
}

export type UserDictionary = {
    [username: string]: User
}

const userDictionary: UserDictionary = {
  'myusername': { email: "myemail@email.it", name: "myname", session: "session" },
  'myusername1': {
    email: "myemail1@email.it",
    name: "myname1",
    session: "session",
  },
};

console.log(userDictionary.myusername); // { email: 'myemail@email.it', name: 'myname', session: 'session' }
console.log(userDictionary["myusername"]); // { email: 'myemail@email.it', name: 'myname', session: 'session' }
console.log(userDictionary.myusername1); // { email: 'myemail1@email.it', name: 'myname1', session: 'session' }
console.log(userDictionary["myusername1"]); // { email: 'myemail1@email.it', name: 'myname1', session: 'session' }
delete userDictionary.myusername;

In this case, the UserDictionary is a special type where the usernames are the keys of the objects and the user data are the values. This type is powerful because it permits the consumer to access directly to the data if it knows the keys and it permits to store a unique value of a specific key. With the index signature, we can create special types where the keys can be string or number. An important thing that you must remember is that the keys of these objects can be iterated with the for-in loop or with the Object.keys method.

console.log(Object.keys(userDictionary)); // [ 'myusername', 'myusername1' ]
for (const key in userDictionary) {
  console.log(key);
}
/*
'myusername'
'myusername1'
*/

It’s all from the Index Signature for today. Bye-bye guys!

Luca Del Puppo

Written by Luca Del Puppo

Run, Code & Learn

AI Native Engineer at Nearform based in Povegliano (TV), Italy. Google Developer Expert in Web Technologies, GitKraken Ambassador, and Codemotion Ambassador.