Defining & Typing Objects

[00:00:00]
>> Let's get into actually building something. So what I want to do, let me just step into the IDE, and we're going to start programming. And so I'm gonna close this down and so right now we're running the micro app, but I'm going to spin up the meso app.

[00:00:30]
So we'll go here and we're gonna go npm run serve:meso, and you can do this from stacklets as well. This is nothing that I'm going to do here is Angular specific. And so within this, we have a very basic object that we are just porting out. And let me just hop into my code, and let's run this side by side.

[00:01:11]
And what I'm also going to do is, I'm just gonna set this to false. Let me just refresh this hopefully. If I just save this, what I wanna do is I want the sidebar to go away, and it's not. I don't really care that much. But, I'll figure that out in a moment.

[00:01:47]
That's why, I'm in the micro app. So in the meso app, back into the home component, or the app component rather, I'm gonna set this to false. We'll save this. There we go. All right, so if you're running the app, this is what you should see, if not you can do everything right inside of Stacklets, no problem.

[00:02:19]
All right, so within our application, I'm gonna just put this side by side. Let's go over here. Let's run the meso, all right. I'm going to delete everything in here, well, there's nothing in here or not much. And let's start from the beginning. So I'm just gonna kind of jump in here and we're gonna start building this out.

[00:03:21]
And so you can see here, it's just an empty object. And so as you start to type this out, all we're gonna do is we're just going to dump this out. So, within this, let's define a client. And we'll just call this client and we'll give it an id of 1.

[00:03:41]
First name is, Peter, I really quite like, This, and we'll go with company is Acme, Inc. Now what I can do here is I can just go and, I can assign this, so whatever, I'm just basically whatever Tango is, I'm just dumping it out. And we're seeing this here.

[00:04:15]
Now, what we can do is let's strongly type this. So we're gonna go interface, Client and we're gonna go firstName is a string, lastName is also a string, and company is a string. Now, from here, one thing that I have started doing is, Typically, what I'll do is I will create a BaseEntity interface, and I'll set an id on this to string or null.

[00:05:04]
And I would recommend if you're setting IDs and you're creating that interface, I would set it to a string, never a number, because you have 9 digits as a number, you have 26 plus 9 if you do it as a string. So you just get more options. And then from here, extends BaseEntity, and so what you can also do is have essentially a contract invoke another contract, which is what's happening here, so I'm gonna say Peter is of type client.

[00:05:36]
We'll dump this out. Now, notice I'm gonna save this and it's compiling okay, but we're getting an error in the IDE. So this is a really, really nice safety net that in loosely typed or non typed JavaScript that I got burnt by this all the time. So this is strongly typed data structures is just a nice little safety net that allows you to kind of proceed and kind of catch it on the way.

[00:06:13]
So when I see these red wiggly squiggly lines, it's like something's wrong. And so what am I missing? Well, it's telling me, by the way, auto sense, or auto suggest in an IDE for JavaScript is amazing. Every time it happens and it works, I pour champagne out on the ground.

[00:06:37]
So let me do another one. We'll just go john, Client. This is also a client and we'll go id 2, firstName John. Company is not available. All right, so now what we can do is we can create a collection or an array to hold those, so clients is an array of clients.

[00:07:14]
And so we're just saying this square brackets are a shorthand for array, and we're saying that this has, or it is an array of client objects. And then from here, we can go peter and john. And what we should be able to do from here, clients save, here we go.

[00:07:40]
So at this point, if you've been programming for more than a couple weeks, we've done something that I'm certain you've done this before.