TypeScript Essentials: Functions & Objects | Objects

TypeScript
Transcript

English (Auto-generated)

talk about the objects in the typescript and that is a quite simple concept. Um Actually it's very helpful when you are in typescript and you're creating objects. So when you're creating some complex application, you're going to see how it's going to help you, you know? So let's just start creating an object. A simple javascript object. So what do you do for that? You actually, you know create an object by creating a variable for the object. So I'm creating something like person. Okay, I mean this is the simple variable but I'm defining it as an object now. Okay, this is an empty object. For now. I'm going inside and inside the person and what I'm gonna do is exactly, I'm gonna um here inside the person. I'm gonna write something like name. And here I'm gonna write a name. I mean this is how you simply create a simple object with the simple property. You can see that this is a property to name. Okay now I'm going down and I'm writing some of the properties like you know, I'm writing here um 28. Okay. And then I'm going down again and what more I'm writing now I'm writing um age here. Okay here, color. Probably that's fine. And the hair color is black. Okay and uh after the hair color I'm gonna add some more property for example is a programmer. Okay now true. Yeah, I'm a programmer because it's all about me. That's awesome. So you can see that we've added three prop three different data types like the the string, the number, the bullying. So it can be true or false by the way. Now I'm going down and what I'm gonna do after going down is right here um I'm gonna modify for example, I'm gonna modify the name. Maybe it's not Shazia Kamal anymore. So I'm writing name. I'm sorry. It should be written this way person dot name equals two. Now the name is john mark. That's awesome. Now I'm going down and I'm writing the age. Okay now the john marks ages 42 but oh sorry, this has to be this way age equals two and I'm writing 40 five. Okay. I increased the age anyway. You can see the red line here and why is the red line? I'm gonna, I'm gonna tell you, I'm gonna go down. I'm gonna add, I think no, I do not need to go down. We can talk about this. So um because above we've created a simple javascript object but we defined the name as the, you know, this is a name which is the type is a string naturally the ages 28 the hair color is black. The is a programmer or not? Is it is bullying. This is the string. This is the number. So it's telling the person age and on the type string is not assign able to type number. This means um according to typescript, the person dot age is supposed to have some data which should be the type number and it's also showing one more thing. One more interesting thing. Um Why it's not showing now view problem the problem is here but close if I go there. Yeah actually when you hover the mouse over the person you can see that actually the typescript typescript defined the types by itself, the name should be string the age should be number, the hair color should be, string is a programmer is bullying so according to typescript this should be the structure. The name must be string age must be numbers so now you can understand that. Okay if you go further for example we write sheer color equals two. Now I'm writing brown that is fine. Um It is having the problem why it is we cannot. Oh oh man we have the here. Oh okay okay okay. Okay I get it actually um the hair color is not defined first. We have to define it. Okay this is another interesting thing um this is about the variable not the object but by chance we got it, we didn't define it. So we have to put the person dot sheer color. Now it is fine because the if you talk about this one it has to be within the person so you know you can see that and now this okay okay if you hover the mouse over the age you're just going to see the typescript is not not attainable if you hover the mouse over the person now you're gonna see the detail the the, you know the person's data types and then also mentioning the ever so that's kind of cool. Anyway um if I go down and I'm writing is a programmer and here I'm sorry again I did a little mistake which is, I have to go with the prison dot is a programmer equal school now. Yes, sorry the john mark is not a program and now you can see that there is the error type is different now type string is not attainable to type boolean but when you hover the mouse here, typescript is not not assign able to type number so even though you didn't mention the types here but because of the data it picked the type so you have to be you know you have to be under the restriction because you're going with the typescript so either you have one chance, one thing you can do, I mean you can go with this way so you just made this one as a string and this is working now and you also can make this one as a string and it would work now. Okay this has to be this way um here it is okay now this is fine but if you want this to be bullying so this has to be a bullying and you need you just simply need to change it false this is fine now and the age if you want the number so um 28 Originally, even though the data is the value is changed, it is 45, it is 28, the data is changed but the types are different I mean you know The type and so it is still picking the type of the 28 for the 45 so you just need to change it two into 45 and now that is actually working fine. Okay and the next thing is, the next thing we need to do is is a programmer true person that here color, that is all things are fine now um there is one more method, you know you are defining the data, you're not defining the data type but it is speaking the type from the these values. So there is one interesting way you can adopt um you can define the data types too and I'm gonna talk about that now, you just need to be right here and uh first of all you need your kind of kind of create, going to create a new object thing anyway but it it would be helping you know, you know, in a very interesting manner so just this and the curly braces. Okay, so for now you're defining your defining that this is an object but you have to now define how much property property that should have. Now you can see that the property name, I just you know simply define this thing which is empty now so it's telling property name doesn't exist on type. You know, this is not exist now according to the data. All these things according to typescript. Actually all these these things are not even existed inside the the person. Um, so what we can do for now here is uh, sorry, we can do is um just going inside and I'm writing name. Now the name is defined but the name is name has the any type for now. So what you can do you can do is name should be strength. That's awesome. Now you actually have defined the type for vendetta and now you can go for more and just make it this way and go down and now the age age should be number. I am hoping that you're understanding it now. It's still, you can see that the black color. Uh and the, you know the is a programmer is a problem now. So here color. It should be a string comma go down is a programmer should be fully in now. Um, everything is fine now. Um, it is not behaving debate, has to be mm hmm. Um why this is not not going according to the oh, it has to be the p Okay, now that is, that is actually actually fine. Okay. And now if I try, if I try to make things work, I just need to be here and I need to write TSC and uh, I just need to press the enter key and I'm gonna have this one updated. Now you can see that it is absolutely the simple, you know, here it is just a simple the J subject as it is as it has to be. But now the types are defined. Now if you try to make it this way it's gonna have the problem. You can see that the you can see that here type string is not assign able to type number. The expected type comes from the property age which is declared here on type as the number. So they defined it. Now, you know earlier you were defining the types while writing the data inside the properties. Now you're not doing that, you're actually defining the property, you know, the um the property type above right here. So I think now this is much understandable. So now this one or that one both are following this method. Okay, there is one more method which is called the interface is this looks kind of, you know, kind of a baggage. So we're going to talk about the interfaces later. No problem. But for now we're going to just move on until then stay tuned
157 Views 0 Likes 0 Comments

We'll go over working with objects in TypeScript.

Comment
Leave a comment (supports markdown format)