Challenge 3: Data Layer Types

[00:00:00]
>> Mike North: Time to put some of this into action. So you're gonna update your type script compiler configuration, and clicking on this hopefully should take us right there and it does. So inside this compiler options object, you're gonna basically say checkJs: true, allowImplicityAny, or sorry, noImplicityAny. I've got my noImplicityAny also true.

[00:00:32]
So you're saying, yes, I do want you to check my JavaScript, and yes, I want you to forbid ImplicitAny. And that basically means that as TypeScript goes through and tries to infer what all of the types are in our code. Any time that it can't come up with a good answer it basically by default, or until we change this here, it would assign it the any type, and that just is like a wild card, could be anything.

[00:01:05]
Any means anything, right. And that's, think of it as the any type means that you're back to regular JavaScript, you can do whatever you want there, you can flip flop between types. So here we've just forbidden that. Now you could still use ExplicitAny, you'd have to add the type information and say, yes, I really do want this to be an any.

[00:01:27]
So but this just tightened our code up considerably in terms of making the compiler, it made it more strict effectively. So you added those and now it will complain about ImplicitAny types and require us to be explicit in spots where the compiler can't infer well enough. And what I want you to do is if we open up these files, these are just the regular JavaScript files, they're all in this data folder.

[00:01:58]
Listener support, grocery item store, cart store, order store, these are just regular classes that involve fetching data and getting some stuff back. We wanna go there and basically fix any complaints that TypeScript may have. So let's see, let me make sure my server is started.
>> Mike North: I expect some complaints here, let's see.

[00:02:24]
See a red thing? All right, so there's a complaint. It says the perimeter ID has an ImplicitAny type. So here we'd probably say number, oop sorry, that's TypeScript. We'd go up here and we'd say, param {number} id, and it'll be quiet. It's okay now, right. So we'll go through, and you basically want to whack away at all of the problems it finds.

[00:02:50]
Let me see if I can make it unearths a nontrivial number of problems, so here are some. You'll note that they don't get added to the list until you actually open the file up. They should hang around, no, they don't, apparently they don't.
>> Mike North: So I would just open the files and get it back down to, back to zero.

[00:03:14]
Now you'll see that sometimes we're dealing with things that have a particular structure. And so you may find that you wanna create these type definitions where you say, here's a cart item or here is a grocery item. And based on the use of these different objects, the properties that we need, you can basically start with an empty object and then you'll start to get errors like, you tried to access property ID off of what you told me was an empty object.

[00:03:42]
And you'll say, I'll fix that, I'll add a property called id. You can kinda widdle away and you'll get to the point where you can see, now everything's happy. And you also get that type checking happening right at compile time. So finally, so you're gonna eliminate all of the problems, complaints about the ImplicitAny type.

[00:04:06]
And the last hint I wanna leave you is that sometimes we end up with a, I hope that's a typo, dear God.
>> Speaker 2: [LAUGH]
>> Mike North: There's some that are not typos there, there's one that was redirect.
>> Speaker 3: Refer.
>> Mike North: Refer, we'll deal with that in web security part.

[00:04:28]
ReadonlyArraay and Array, they're both, you can use bracket notation to get an individual item out of it. ArrayLike is sort of a structure that surrounds both of those. So it may be useful for you to deal with ArrayLike in order to relax things enough to where it's a function that can take anything that looks like an array.