Vue 3 with TypeScript Tutorial #2 - Vue Components using TypeScript

Key Takeaways

alright and gang so as we saw in the last video view components look a little bit different when we're working with typescript first of all this script has a lang attribute of typescript or ts telling view we're using typescript not javascript then the way we're actually creating the component right here this object is different too we're using something called define component to make it so whenever we create a new component using typescript we generally make it this way the rest of the component the way we make the template and also the styles as well that is exactly the same so let's try working with typescript inside our component now to begin with in this lesson i'll be using the options api but in every lesson thereafter i'm going to be using the composition api so let's start by adding a bit of data so let's create this data function which returns an object where we can place our data now i'm just going to create a name property which will be a string now when we're using basic built-in types like strings numbers booleans etc these types will be inferred by typescript automatically so we don't need to specify the type explicitly typescript is going to see this and infer its type as a string and that means that this data property must always be a string from this point on so let's try using this in the template let's go up to the template and we're going to create instead of this a paragraph tag where we're going to output the name so if i save this i'm going to preview this in a browser we can see a link over here so everything is working all right then so what if we want to change this value at some point well let's create a method to do this so below data i'm going to create the methods property and inside here we can create a function which is going to change the name so i'm going to call this change name like so all right so this is going to take in an argument and this argument is going to be the new name that we want to change it to now notice straight away we get some kind of warning or error right here if we hover over it it says name is declared but its value is never read and also parameter name implicitly has an any type so that is typescript saying look you're not specifying the type that this should be well we always want it to be a string right so we'll say string right here and now the error goes away so what we're doing is typing the argument so now only a string can be passed in as the name we don't want a number to be passed in because we can't update this to be a number so inside here now i'm just going to say this dot name and that means grab the property name for this component and i want to set it equal to the name we take in this argument right here so that's all there is to it pretty simple now what if we specified this to be a number right here well this is fine but now notice we get an error right here and if we hover over that it says type number is not assignable to type string so this is what i was talking about a minute ago typescript inferred this type to be a string and we cannot then change it into a number in the future typescript doesn't allow us to do that so it must always be a string and because this function knows that this is going to be a number it's giving us this error right here to say look we can't do this we can't update the name with whatever number is coming in here so this must be string all right cool so let's try adding this in the template as well we'll do a button so that when a user clicks on the button it changes the name and we're going to pass in an argument so button first of all and we'll say change name inside that button and we'll attach a click event to the button and that is going to be equal to some kind of function that function is change name so we're going to invoke that function we also want to pass in an argument so parentheses now if we try to pass in a new name for example zelda like that it's absolutely fine because this is a string the function accepts a string if we try to pass in a number then we're going to get an error again and if we hover over this it says argument type number is not assignable to parameter of type string so it's saying look we're accepting this parameter which is a string and you're trying to pass in a number so this has to be a string so this is just one of the ways that using typescript is benefiting us in this instance it's telling us before we even preview our code in the browser that something is wrong so let's change this back to zelda and see if this works i'm going to go to the browser change name and yes it works all right then so let's try another example i'm going to add in another property called age and this is going to be say 25. now in this instance i want the age to be a number however i also want to allow the age property to be a string in the future if we change it as well not just a number now if i left it like this typescript would infer this to be just a number and never allow us to change it to a string so we want to explicitly type this property to be a number or string how do we do that well normally in typescript when we type something we would say okay here's a variable i'm going to call it age and then i would do a colon and then say the type so if i wanted this to be a number then i'd type it to be a number and then set the value for example 25. if i wanted it to be a string then this would be string now you can see we get an error over here because this is not a string so it would have to be a string so 25 in quotes for example now if i wanted this to be a string or a number then i would use a union type which is just two types next to each other with a pipe symbol in between so string or number essentially so now if this is a string it's fine and now if this is a number it's fine but inside the data object right here we can't use this kind of syntax to type it because this is a data property and not a variable like this so how do we do it inside the data object right here well we can use something called type assertion otherwise known as type casting and this is a way that we can explicitly tell view that a property will be of a certain type so we could define an initial value like this and then say as and number pipe string so a union type right here meaning it can be either a number or a string so in the future now we're saying this can be a number as it is or we can change it to a string so this is how we type things inside the data object right here we use type assertion using the as keyword okay all right then so let's output that in the template up here i'm going to do a dash and then output the age as well and save it oops we need curly braces there not square brackets save that and now we can see 25 change name still works i also want to create a function to change the age as well so let's do that down here so change age and inside here we're going to take in the age argument but remember this could be two different types now it could be a string or a number now you could have it as just number to update it that would be absolutely fine and it's not going to give you any kind of errors because this can be a number we don't have to specify here the argument must be a number or a string as long as it is one of these it doesn't matter so inside here i could say this dot age is equal to the age parameter right here and there's no errors likewise i could change this to string and there's no errors this all works fine i'm going to pass in the union type to say string and a number so it can be either one of these and again there's no error however if i added on something like a boolean as well then there is going to be an error and if we hover over this it says type string number boolean is not assignable to type string number so we have to take this off all right then so that is the function let's try using it i'm going to duplicate this button and i'm going to change this to age and now inside here i'm going to change this to 30 and we get an error that's because the function needs updating as well this should be change h all right then so this obviously works there's no error there if we save it and try it change age it works now if i change this to a string 35 for example and save this then it's still going to work because this can be a string or a number if i change this to something else like a boolean then we get an error right here all right then cool so let's go back and change this to 30. now one more thing to do with these functions before we move on i'm just going to return the name value right here and also return age just so i can show you that typescript automatically infers the return value of these functions as well so if we hover over this you can see to the right of the function over here it says string and that is typescript telling us look this is always going to return a string this function if we hover over this one we can see to the right of the function if we hover over this string or number so it knows this is always going to be a string or number all right then so now we've seen how to use typescript a little bit inside view components using the options api next up i want to move on to using it with the composition api