TypeScript Tutorial #5 - Explicit Types

Key Takeaways

okay then going so currently when we write our variables and Asylum values typescript automatically infers the variable type based on the value we give it but sometimes we might just want to initialize a variable without giving it a value so then it can't really infer its type and then we could give it any value in the future but we can get around this by explicitly giving the variable a type so how do we do that well say for example I wanted to declare a variable called character and I wanted this to be a string but I don't know what the value of that string is going to be yet well I could say that this is gonna be a string by doing colon and string like so and now we're saying okay initialize this variable but don't give it a value but in the future only allow us to give this a value of a string and I could do the same for numbers or billions so for example I could say let's age be a number by saying let age colon number and same for boolean let is logged in and then that is going to be a boolean okay so now we're giving these three things types and if we hover over one of these things we can see it's a string this is a number and this is a boolean so now say for example I wanted to give age a value well then if I tried to give it a value of a string like Luigi it's not gonna let me do this and we get an error and that's because we've already explicitly given this age variable a type so we can't do this but I could say age is equal to some kind of number like 30 and that is fine same for is logged in I couldn't set that equal to something like a number because we already said this should be a boolean but I could say oops is is logged in not is locked like that but I could change it to true or false so I could say is logged in is now equal to true and that's absolutely fine okay so there the basic types that's how we can explicitly define what types are going to be inside a variable but what about arrays they're a little bit more complicated right so say for example have an array I'll say let ninjas and this is going to be an array now if I want this to be an array of strings I could say : and then string square brackets and now in the future this can only be an array of strings so if I say ninjas is now equal to 10 and 23 that's not going to be allowed because these are not strings but they could then be something like Yoshi and Mario that is allowed now sometimes you want to initialize this to be an empty array to begin with because then we can use the push method on this if we didn't have that here and we didn't initialize it with a value we couldn't say dot push and then add on a string because at the minute it's not actually an empty array and we're not getting an error here but if I save this now and go to the browser we get an error here it says cannot read property push of undefined and that's because we've not actually initialized this with a value yet of an empty array we're saying in the future it should be a string array and then we're trying to push something onto it but we've not yet declared that string array I hope that makes sense so sometimes it's best to initialize it with an empty array and then we can only play strings inside that array so now if I save this it should work we don't get an error okay okay so what if I want to create some kind of mixed array so I could have strings and numbers in it and maybe billions as well well for that we could use something that is known as a union type and a union type is basically our way of saying it could be one of two or one of three types so say I have an array called mixed and I want this to be an array we put our type before that in a second I'll set it equal to an empty array to begin with but right here instead of it just being a string array I also want it to be numbers and billions that we can store it here as well well how do we do that we'll use a union type and to do that we can open up parentheses and say in here it could be a string or and we use a pipe to say or number and now we could store strings and numbers inside this thing right here so I could come down here and say mixed push and it's going to be a string hello that would be fine no error I could say mixed push and this will be 20 and that would be fine but if I then say mixed push and it's going to be a boolean so I could say false then we should get an error because we've not said this can be a boolean but if I now add another pipe on and say boolean right here this is saying that this array can be any of these three types right here so these are known as Union types when we declare something like this and it can be one of several different types it's known as a union type so let's just log these to the console to see what it looks like mixed and we've pushed those three variables to it save it and we can see right here hello 20 unfolds so that all works awesome now we can also use Union types on normal variables not just a raise so say for example I create a new variable like a UID and that could be either in string format or number format well I could say this is going to be a string or a number now when we're using a union type that is not in front of an array we don't have to use parentheses you do if it's in front of an array but you don't if we're just giving a union type to a normal variable like this okay so now UID could be and there a string so I could say 1 2 3 that's fine or UID could be a number 1 2 3 but UID couldn't be something else like a boolean and that's not going to work okay all right then so finally objects how do we explicitly declare a variable as an object well we could just simply say let ninja 1 we'll call this variable be an object type and now we could say ninja 1 is equal to any kind of object so I could say an object where there's a name property and that's going to be Yoshi and then also an age property and that's going to be 30 so that's absolutely fine because this is still an object and saying that ninja want must be an object but we then couldn't say ninja one is equal to a string for example that wouldn't work all right and by the way we could still declare this to be some kind of an array that would work because an array is actually a kind of object so that is allowed but if you want to be more specific when declaring the type of object you can be so I could say down here for example let ninja to be an object and we can do it explicitly like this so it's not equal to an object here we're just declaring the type it should be in the future and we're saying right here it should be a type of object where it has a name property and that should be a string yeah and then we have an age property which should be a number and maybe also a belt color property which should be a string so now we're saying right here okay ninja 2 is an object but it must have these three properties inside it name age and belt and the types of those should be string number and string so now if I try to say ninja 2 is equal to an object at the minute because we don't have these properties then we're not allowed to do that it has to have all of these properties with these values so if I add on name to be Mario and then also the age right here to be 20 and then finally the belt color is going to be black this now works we don't get any errors at all but if I try to add on the fourth property skills which is an array now we get an error and it won't let us do this okay so this is how we explicitly type our variables before we give them a value