Learn TypeScript With Vue.js 3 In 20 Minutes

hey developers today we are taking a vue.js app and we're going to add typescript to it i'm going to show you step by step how that works and some gotchas and some things you should know about it hey and if you don't know my name is eric i'm a full stack software developer so if you guys like vue.js react angular web development make sure you click that like button and subscribe button that really helps me out all right so let's go ahead and just begin so you can see here this isn't very pretty but this is actually using the itunes search api which is actually a really handy dandy api that allows you to search for music and i thought it'd be nice if i could just use this api and then show you the app that i used to create it we're going to add a few enhancements to it and i'm going to show you how i can add typescript to it so i don't know if i put in drake in here you see here now it has information about drake now you can see here it have i have this empty space where it's supposed to show artwork then empty space shows price so we'll go ahead and add that in and i'll show you how easy it is when we use typescript because we're going to have types available okay so here is the app and there is some red squiggly lines that we want to try to fix and by the way i'll put a link to this app in the description below if you want to follow along it's not too bad though first before i start i want to show you i do have a few extensions installed if you are looking to use vs code with your view app and you're using wanting to use view three there excuse me typescript and view three i would use vtor this is uh what i'm using and also one called vue dx so these are the two that i'm primarily using for this video so i would install it also there's one more extension that i like to use too and actually if you just take one moment you'll learn all about it here from our sponsor i want to talk about tab 9 just for a quick moment if you haven't heard tab 9 is the way to basically supercharge your auto completions inside your ide and what's awesome about it is it supports all modern programming languages the way it works is you install it in your code editor and anytime you type anything out it gives you these really great suggestions that you should use and the way it works is that it's ai powered it's completely safe it's running on your local machine so you don't have to worry about your code going in the cloud or anything it's been trained on a model using over 2 million pages on github so it has really great auto completion and it supports everything including the apple apple silicon m1 chip i've been using it for a while in my own so you can see here the audit completion is absolutely excellent and what's really nice you can try it for free it has a free forever plan and then if you want it to be work even better they have a pro plan that is gpu powered yeah so check out tab nine i'm gonna put a link in the description they have been awesome it's an awesome tool go ahead and get it it's absolutely for free and if you want to get that pro plan it's even better so check it out the link will be in the description below all right so i hope you learned a little bit about tab nine it's absolutely 100 free so yeah make sure you click on that link in the description and just get it for free and we'll be using it actually inside this video with typescript which works well together what i have right now is something really simple i have this form input here and i'm every time you type something in sends it to the search itunes method that i have right here that's asynchronous now one thing i like to do when i set my view apps is i like to take some of the information and and especially like api calls and i like to put it in a view x store but if i'm not dealing with a view x store then i like to put it in its own file and so i put it in the services file which is basically just i'm exporting it out it's in esx export it's asynchronous and i'm just putting in this this url for the itunes api and then i'm converting it to json and then inside my app view file you can see your line 30 i'm just waiting for it the itunes search grabbing the data and setting it and then displaying it and iterating over the results right here this data.results so that's essentially what i'm doing here in this app if we want to add typescript to this app there's a couple things we can do so first this is actually a view three app which if you are debating whether to do typescript or add typescript to a view to app versus view three there's really no question you should use view three now if you are coming and watching this video and you have a legacy app and you want to add typescript in it uh this pro video isn't the right one for you i'm gonna be showing you what you'd use it for view three in fact i would say that you are going to run into some problems if you're on view two and you try to add typescript there is the classes there's a way to do it through classes which would be a major rewrite for most people and there is a way to do it with different type of syntax view three was really built from the ground up with typescript in mind so it has a much better developer experience than when you're using youtube and by the way i mentioned that we're using view three when i created the view 3 app it gave me an option to check to see if i wanted to create it as a normal view 3 app or a view three app with typescript and one thing that defines it that it's a view three apple type script is that you get this define component right here and you can see here this says define component from view if you if you need to create an app with typescript make sure you export define component and then it's an object otherwise you'll have some problems now if you're using view cli when you're when you're actually creating the app you'll have a menu and one of the menu options will be to add typescript if you're using veet one of the options is basically view dash ts and that's uh that's with typescript so first thing we want to do inside this app is to add in types as you suspect that having types would be really important that way that i can have types in my template up here and that's one of the reasons we installed vue dx and vtor is that we can actually as we write in our code inside our template we actually have the intellisense and the autocompletion that we expect from a typed language and well but we haven't set any types up at all let's do that first and if you're not if you're completely confused at this point you don't know what typescript is or types i'll put a link to the typescript handbook and it kind of goes into like what types are it's basically you could take your language this javascript that doesn't normally have types you can add them to them manually it's really at compile time it helps you in your in your in your vs code it doesn't actually get included in your in your code especially it's just kind of a helpful developer experience to make it more useful there's a few ways to do this i've seen this in react and in other frameworks sometimes people create a models folder sometimes people create a types folder in this example i think i'm just going to create a types folder so i'm going to go right here i'm going to create a new folder i'm going to call it types and i'm going to create a new file and we can call it itunes and you can do call it.interface.typescript or just.ts i'll just call it uh we'll just call it interface.ts really up to you what you want to call it just have the same name and convention throughout your app if you want to actually add types the most probably the first thing we want to do is this itunes search we want to see when we connect to this backend we want to grab the data but we want to be able to look through it and we want to find the types for that so i have a quick and kind of dirty solution for this and i showed this in a previous video and i kind of like this i go back to my app and i open up the console and every time the i do a search i actually have a console log right here you can see in line 34. and what's nice about that is like let's say i put in drake here and hit search i have the data coming back it's actually proxied so right now this is talking this is uh this kind of reactive object so what i'm going to do instead of doing this.data i'm going to use this. value so you can see it better so let's try this again drake okay i think you can see it's kind of small at the bottom but it has this whole results object that is now console logged to my console and what i like to do is i right click on it i store is a global object for temp 1 and then i use the copy command which then copies it to my local clipboard on my windows pc or on on your mac if you're using mac and then i installed this extension which i didn't mention before but it's called paste to json paste json and then there's a bunch of tools like this but essentially what i can do is i can quickly create types and interfaces from this and i install this in extension vs code and then i open up the file that i want to have my interfaces in this one and then i do like a command shift p and i type in paste json as types and then it's going to ask me what i want to call the top one so i'm going to call it itunes types and cool so went ahead and did it for me so you can see here has this itunes types this interface which has results and counts which matches if you look inside the console the kind of output that it gives you now it's not perfect uh last time i did this somebody told me hey this isn't quite right so what you could do is i go through here and it looks like it adds in a bunch of artists has these enums in here for artist named drake so it has this artist name here so it's like assuming that sometimes the artist's name is is drake and sometimes it's drake future and all this and what i do usually just to make things simple is i double check the api and then i kind of just delete all this that all these enums that i created because sometimes it's not right and then i just take this and i add in the actual type to it so so it's a little bit nicer and then oh oops i gotta delete these two as well i think this is string and obviously if this was in production you'd want to double check the actual types that are coming back but this is kind of a quick and dirty way of creating your interface without having to type this all out and then also we'll come back to this but one thing i like to do is is make these optional just in case we know that it returns nothing back but you can play around with this this is really for you and to get correct types when you write your code and and have it be more successful for you so i'm going to close this itunes types interface and the first thing i want to do is i remember i told you guys i created this service but i can add in some types to this service so first we know that the search coming back is a string that means that it's going to take in a string so right there that adds a little bit better type safety now if you look at if we go back to app dot view here and we look at what roots being returned this value if i type in value dot i don't have anything coming up so it doesn't have any type inference it doesn't tell me what actually is being returned so a cool thing we can do is in the service we can basically tell it what type of type is it that's coming back from it and to do that we actually put this colon here we know it's a promise that's being returned because we're doing async await and then we're going to use that new itunes i think we call it itunes type types and you can see it automatically since i hit tab there it automatically added it for me inside my inside this services file right here so now we should have types that come back because we're assuming it's a promise with this type so we go back to app view if we look at value dot you can see right here in the browser when you hit dot now we have this auto completion so right away we're getting the power of typescript and if we try to put something that doesn't make sense here it's going to give you the reg squiggly line because this isn't the correct type cool so now we have a little bit better typing just inside this value coming back from this but there's a few other things we can do we can see this method here we probably want to type on this and we know that it's going to be a string and that gets rid of that error and there's a few other things we can do here first we can actually add a promise in here because we know that normally this returns a promise but we're not returning anything so it's void so that's kind of just nice things to do anytime inside your have methods inside your view three you should at least put a return type even though it's nothing so anytime you want to add in types into your methods you can have this colon right here you put the return type after after the colon and then whatever is inside the colon whatever arguments the method takes you can then put types inside there as well so this is once again now we know that search can't equal a number if it does then you get this error that number is not assignable type string so right there that's pretty valuable for you but we still have a problem that we have we assign this.data to value but do we have we're still getting these red squigglier lines because results does not exist exist and type object because we we basically assigned it as a type object when we created it but we never assigned it type in the return in the data object itself you can actually describe what types they are they're simple like string or text it's already inferred but if it's something more complicated like an object that has an interface then what you need to do is you can type in as here and then the type so we know was itunes types i think it was and if i hit tab there cool so went ahead and automatically added the import in and now this has typing onto it and if i save it cool so look at this i can now have this data.results now i have the type listed in here and it's nice if i do data if i'm inside the template and type data dot i have all the types in here result count results everything we expect which is exactly what we want now we wanted to add artwork in so okay so let's see let's see let's go ahead and add in some image and a price so remember if we're using view three we can just hit this colon here and now we have this accent al album and albums will have the autocomplete too so if i hit album dot i can find what it is now i know it's artwork url 100 and for price i can do album remember this is a v4 and it's in it already knows since we're if we we're basically using a array it already infers the types that we have out of it so album dot collection price there it is not collection name flexion price cool so i went ahead both of those in there and now i have an error here data error oops i can just delete that there we are so let's add in drake cool so now i have artwork and pricing for everything and if i wanted to put in now taylor swift i have artwork and pricing so now i have added in i basically added in typing types to my view 3 app i have a type on the data i have type on what's coming back from it i have this method that has a return type so if i ever call it somewhere and i don't call it the correct way with the correct what it expects it's going to give me an error so this is really cool it's going to help me prevent errors let's see what it looks like if we want to use it in as props we can actually add types into props too and so what i did is i created this show album here and we're gonna quickly get this up and running so we're gonna go here i'm gonna add in the show album and i have to import it in import the show album from i think it's components the show album remember always do dot view for view files and then if i come back up here it's give me an error because actually i want to do is i want to pass in every single album into the show album to essentially do what it says here so i'm going to copy and paste this and i'm going to go into the components i already created this beforehand i'm going to paste in there it is i'm going to unhighlight it now it's getting me an error because i haven't done anything with album yet so i need to create some props i'm going to do some props and this is how i declare i'm going to declare it as an object because like this this will be this will allow me to show you how it works so i'm going to create something called album as an object and i'm just put a type in here undo object as and then i'm using this thing called prop type and then i can pass in the type of prop it is and that's in results by the way this is an official documentation for view three if you ever forget i have to look it up every now and then myself and if i hit uh control dot it asks or command dot i can add prop to existing import declaration cool and this result is actually uh well part of that interface too so now i can do that remember in the interfaces that i created i have this result result interface so i just imported it in it's probably not a great name we probably want to change it if this was like a real app in production but so we work for now and also we want to do one thing you can see here even though we've done this we're still having errors up here so if we save this it's still saying like object is possibly undefined because we didn't actually make this required or not so it doesn't really know if it's it should be there or not but actually you have to wrap this in some kind of if album but we can assume that we require it so i can just put required equals true here and now we've gotten rid of this album error now we still have an error here it's missing ending tag because i did a copy and paste error and this h4 should be h4 so let's go and fix this hold on h2 here um also this is not supposed to be 99 so let's be hundred all right so let's see if that works so if i come back here and i type in uh i know taylor swift cool so it's still working as expected and now we have types on our props itself which is really really cool so now we've done both now we do have one more error here and that's because this album it's probably thinking that this album is here so sometimes if my typescript's messing up i just reload the window i do command shift p developer reload window to see if it fixes it which it might yep looks like i don't have any errors anymore on it so that's a quick trip also sometimes uh if you have any issues with with different types it might just kind of take some playing around with how you're defining the interface types if it takes you a long time don't worry about it i have been in projects where i've had red squiggly lines in my editor because i've messed up a typing and i just it's more important to get the work done than trying to fix all the types so don't worry about that too much or there's also a way you can just do any to different types by something we try to avoid cool so now we have the show album we have by the way this is defined as a typescript component and everything seems to work well so the last thing i want to show you is for this app let's say we wanted to convert this over from using the this is kind of the options api where we use this data object and methods but times if we want to use the setup function because we're using view three and we like the composition api and that's where we have this setup function so how do we do that okay so we're going to do it step by step but i think the first thing we do is we're going to have to add in um some types into our composition api so i'm going to do this i'm going to just comment out all this and i first want to create i'm going to create something called albums and we're going to use this special reactive type which is something you can add in from view and it's allow you to create like reactive objects using the composition api and now we can do some cool things with this so to do this we can add in this reactive type and to do this we add in the opening closing bracket here and then we put in what we want it and now what i'm going to do is i'm going to call it data here and then this is going to be the itunes type types remember that itunes type is the typing that we're going to have and then we're going to have data here and that's going to be an empty object so this reactive object essentially is going to be throughout our app and it's going to be used um to grab the album's data but i'll show you kind of what i'm thinking here then i want some search text so i'm going to have a ref there with some empty text in it and once again i'm hit ctrl dot to add it and this is just a different way to have reactive objects that aren't like reactive variables essentially and so basically if you if you're following along these are the same names we had in our data object up here then i'm going to create a new search itunes which is going to be an async function and it's going to look really similar to the async function that we have now so just give me a moment i'll type this out okay so i went ahead and created this new search itunes basically method almost exactly the same one that we created here methods and it's once again we're using the types in there to type the string that we expect and it's returning nothing and we're grabbing the data from the itunes search and now we can return back everything we just did here so i can return search itunes and we're gonna use something called two refs if you saw here we have this data object and this is basically gonna destructure our reactive object and it's gonna expose the data object to our template so we're going to use this two refs i'm going to hit control dot there to add it this is also where you search text now two refs is internal to view three so it just added it in here from view and it's just way i usually use it any time i'm using this reactive property to create reactive objects and reactive objects being that when they get changed anywhere in the app like when the search itunes changes this value changes it changes up here reactively all right so i think that's it i'm going to save it remember always when using the setup function always to return the values here and let's see if it works i'm going to refresh it here i'm going to put in taylor swift cool so it's still working as expected but now we are using the data using the setup composition api instead all right so i think that's all i'm going to show you guys today i mean that was a lot to take in so you know if that was too much make sure you download this app just kind of look through it if you're thinking like why would you ever want to use this setup function but just think you can take a lot of this functionality put it into its own file and then import it in anywhere and then since it's reactive these objects are reactive that means you can kind of share the data throughout the app it has a lot of powerful applications tip you know i think either way works fine and this is probably just scratching the surface of what you can do when using the composition api anyway so that that's how you do it in in typescript you can definitely add these reactive objects you can add types to them it makes your your vs code and your coding just a little bit better let me know if you agree or disagree leave a comment below thanks i appreciate it [Music]

Channel: Program With Erik

Views: 31,397

Keywords: Vue.js 3 Tutorial, Vue tutorial, Vue tutorial Typescript, TypeScript, TypeScript tutorial vue, Vue typescript 2021, Vue.js Typescript 2021, Program With Eric, Program With Erik, Erik Hanchett

Id: tZK7vZifPp0

Length: 22min 56sec (1376 seconds)

Published: Mon Mar 08 2021