TypeScript Tutorial #4 - Objects & Arrays

or rather than gang so now let's look at two more types arrays and objects so first of all let's create a new array and we'll call this names and set it equal to an array just like we would in JavaScript and I'll store some different strings inside this array so Luigi and we'll do Mario and then Yoshi all right so we now have an array of strings which are names right now if I wanted to for example push a new item on to this array which is a string that's absolutely fine to do I could say names push and then push on a new name for example toad and that's absolutely fine it works but if I try to push on to the array a value which is a different type like a number or a boolean it's not gonna let me do this so for example names dot push and then add on a number then I'm gonna get a little arrow right here and if I hover over that it says argument of type 3 is not assignable to parameter of type string so it's only letting me put in strings because that's what we initially defined in this array so we can't do this thing right here we can only add on strings and likewise if I try to override one of these with a different type for example names and then say position 0 and try to set that equal to a boolean or a number again then it's also going to error and it won't let me do this and whenever we get one of these areas it's not going to compile the type script into JavaScript so we can't do this stuff right here when we declare a new array the types that we assign into that array cannot then be changed later on let's do another example I'm gonna say let numbers equal to an array of numbers and in here I'll just do 10 20 30 and 40 and then underneath I'm gonna say numbers dot push and add on 25 and that's absolutely fine but if I tried to say numbers dot push and then add on a string for example Shawn that doesn't work likewise if I say numbers and then position 1 or whatever and set that equal to a string like Shawn this is not gonna work ok so that's a raise now if we wanted to have a mixed array with different types in it we can do we just have to declare that when we initialize our array so I could say for example let mixed equal to an array and then inside here we could have Ken and we'll also have a number four and we'll have another string chun-li and then maybe another two numbers 8 and 9 so now this is an array which has two different types in and it could have a third type in if you want you could have a billion in as long as we're declaring this at the start when we first make the array that's absolutely fine typescript will look at this and say okay well this is an array now which can contain strings or numbers right and if I now try to say mixed push and then add on a string so I could say Ryu right here it's gonna let me do that it does an error but I could also say mixed push and then add on a number as well that's absolutely fine and also I could change any position inside the array to a number or a string it doesn't matter if it was a string before and I want to change it to a number I can do that so I could say mixed 0 which is currently a string is now equal to a number and I could say that is 3 and this is absolutely fine to do so that's how we have mixed arrays but if we declare our array at the start to just contain one type it can only then have that one type in it all right so that's arrays in a nutshell now let's move on to objects so likewise with objects they're exactly the same as in JavaScript if I want to create one I can say let's and we'll call this ninja and set it equal to an object and inside this object we can declare different properties so I could say that the name is going to be Mario and under that I could say we have a belt which is going to be a string and that is black and then also I could say age is 30 now I'm creating an object right here with these three different properties now these three properties work the same way as variables if I declare a variable as a specific type I can't change that type oh and by the way just quickly if I create an array I then can't say down here names is then equal to something else like a string you know I can't change the type of the array itself so not only are we fixed typing the values inside the array but also the type of the variable as well forgot to mention that but that brings me on to this down here these things right here behave the same way as variables if we declare a variable to be a specific type we then can't change that type if we declare a property to be a specific type then we can't change that type these will always have to be strings and likewise this always has to be an object right so let me come down here and I'm going to say that ninja age is now equal to 40 well that's absolutely fine because age is currently a number and we're just updating a number if I say that the ninja dot name is equal to something like Rio then again that's absolutely fine because we're just updating the string but if I say now that the ninja age is equal to a string 30 then we get an error because age has to be a number not a string and it can't change once we've defined this as a certain type so we can't do this right here likewise we can't then just add on extra properties once we've defined the variable or the object to begin with so I can't say ninja and then make up a new property called skills and set that equal to an array of some kind of skills like fighting or maybe sneaking I can't do this because this property skills did not exist on the ninja object to begin with and once we've defined the object we then can't add additional properties to it ok so what if I wants you override the whole thing the whole object well I can do that I can't override it with a different type I can't set it to equal an array or a string it doesn't work like that we can't change the type of this it has to be an object but I could update it to be a new object and I could say well ok the name this time is going to be Yoshi and then the belt is going to be orange and then the age is going to be 40 it allows me to do that but notice this if I take off one of the properties I get an error because it doesn't match the initial strut of this object that we initially declared once we initially declare something like this it has to have the same structure the exact same type of object with the same properties the values can be different of these properties but they still have to be the same type I couldn't say name is now you know a number that doesn't work but there can be different values and they have to have exactly the same names so age has to be there like that now likewise I couldn't then add on another property either I couldn't say okay well I want skills to be added on to this ninja object as well because again it doesn't then match the structure of the initial object that we created so typescript is quite strict with these different types but it's not a bad thing it's a good thing because it leads to less errors down the line and it gives you cleaner more predictable code

Channel: The Net Ninja

Views: 67,617

Keywords: typescript, typescript tutorial, typescript vs javascript, ts, ts vs js, typescript for beginners, tutorial, tutorial for beginners, typescript tutorial for beginners, what is typescript, typescript basics, install typescript

Id: 157NopQ-chU

Length: 7min 36sec (456 seconds)

Published: Mon May 11 2020