TypeScript 3 Fundamentals, v2 TypeScript 3 Fundamentals, v2

Dictionary Objects & Index Signatures

Check out a free preview of the full TypeScript 3 Fundamentals, v2 course:
The "Dictionary Objects & Index Signatures" Lesson is part of the full, TypeScript 3 Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Mike explains how dictionary objects are typed in TypeScript, and pays special attention to a common error that developers fall into.

Get Unlimited Access Now

Transcript from the "Dictionary Objects & Index Signatures" Lesson

[00:00:00]
>> Mike North: Here's our array example. Index signatures which look like this here, square brackets, makes sense right. Because that's how we access a property off of an object with an arbitrary key. We are saying if you access a property off a phone number dict and give it a string.

[00:00:22] It'll either not be there at all, or it'll have this form. Now, when you are defining a dictionary type like this, and a dictionary is just a key value data structure, you have almost certainly used an object as a dictionary before in JavaScript property keys with consistent object types, right.

[00:00:44] You've got to be careful that you don't type this in such a way that TypeScript gives you a false guarantee that no matter what property key you pass in, you will definitely get a well-defined value out. Let's look at what would happen if we did that.
>> Mike North: So, an empty object is a valid case here, right?

[00:01:08] No keys, and no matter what I do it's acting like there's something there for me. This is a hard to track down error waiting to happen, so don't do that. By adding undefined,
>> Mike North: We force,
>> Mike North: A check on this, and what you'd have to do is something like this.

[00:01:41]
>> Mike North: See how up here the undefined is present? And inside the block following the condition the undefined has disappeared. What we have done here is narrowed the type. TypeScript understands that this condition that it understands that this type here can never have a truthy value, never. So, there is no way for an undefined value to pass into this block here.

[00:02:09] And this is the proper use that we would want anyway. Because if we're just handed something and we're told that it's this type we don't necessarily know what's on there. We don't know which keys are valid for looking things up. So, conditions can be used to narrow types.

[00:02:29] We could do it a different way.
>> Mike North: It's just the inverse, right? We're checking to see if the type of d.abc is an object.
>> Mike North: Let's see what happens with this, impossible. It says this is like in terms of the Venn diagram TypeScript's always trying to figure out a way to make things work.

[00:02:57] This is a situation where it's saying okay, this can either be undefined or an object. So now we have some code that would run in the case where it's a string. Never gonna happen never, so you get never. I'll leave that there so you can follow on that.

[00:03:20] Okay, here is our phone number dictionary. And this is just demonstrating that we can place values in there if we misspelt something we'd get busted on it, right. It's telling us there's no araCode, we have to spell that right, areaCode. I'm gonna try editing it in a second, but let's just see what happens right now.

[00:03:46] So, we can eliminate it because if this were in our contacts page in our phone, we could have multiple phone numbers there. Some people are not gonna have a home number, they'll only have an office number, so, this is fine. So it look likes the structure of these values here, that's enforced.

[00:04:03] But we have total control over what the properties keys are. One thing that's important to know is that you can only have at most one string index signature and one number index signature. So, you could change this to like number and have something slightly different than if you passed a string in and tried to access a property that way.