If you already have a subscription, you can sign in.
Enjoy free content straight from your inbox 💌
00:00
Here we have a JavaScript object with a single member. Hello. You can access members of a JavaScript object using a string index. Similarly, here we have an object with a single member, 1, 3, 3 7. We can access this member using a number index similar to how you would do it in a JavaScript array. TypeScript allows you to access members of a JavaScript object using arbitrary string or number indexes by declaring an index signature. Here we are declaring a type whose instances you will be able to access using a key of type string,
00:32
and the members will be bullions. The type for the key can only be a string or a number, as those are the only ones that are safely supported by JavaScript. You are free to name the index member whatever you want. It is only used for developer documentation. Here we simply use the name key and in terms of values, you can put whatever you want. Here we simply use the type bullion. Now let's look at an example application of an index signature. Here we have a type representing a person with member's display name and email. We can declare a type for a key value pair of username,
01:06
two persons using an index signature. We can create an instance of this dictionary as a simple JavaScript object. Here. We've pre initialized it with a single key called Jane and a corresponding person object. We can also assign to any given key afterwards. For example, here we are assigning a person to the key John. We can also read the value at any given key using a JavaScript string indexer. Additionally, we can use the JavaScript delete operator to delete the value. At any given string index, you are allowed to mix index signatures with other well-defined members.
01:42
For example, here we are saying that the person dictionary must always have a member chain of type person, so if you try to create a person dictionary without this member type script will give us a compiled time error. And if you get rid of this required member, the error will go away. Also, all additional members of a type with an indexer must conform to the index signature. For example, if you try to create a member Alfred of type bullion, TypeScript will complain that bullion is not assignable to the index signature, which is person. So we can either change it to be of type person
02:14
or just get rid of this member. Now you can always access this person dictionary with any given key. However, if the key value is not present, the JavaScript runtime will return us to special value. Undefined and accessing something like an email of of an undefined will result in a runtime error. However, notice that TypeScript is not catching this right now. If you want TypeScript to catch these mistakes, you can add a union of undefined to the values returned by the index signature. And now TypeScript correctly highlights a potential error with a familiar message object is possibly undefined.
02:49
Now, one more thing worth mentioning is that when we are assigning by a given string index, TypeScript is still going to provide us with type safety to ensure that it is actually a person. For example, have you made a typo in the email member and TypeScript has figured this out and provides the suggestion for the correct spelling of email.