TypeScript Core Concepts - Adding TypeScript to a VS Code project

Key Takeaways

well welcome back to the getting started with typescript series my name is dan wallin i'm a cloud advocate at microsoft and in the previous video i introduced why it's worth your time to learn typescript and i talked about five different topics related to that that i think are important to consider in this video we're going to jump right into the code aspect assume that you do want to learn it and i'm going to show you how we can add typescript to an empty project now keep in mind that if you're doing react or vue or angular or some other library or framework out there they likely already have typescript support built in i'm going to show you from scratch though because i always think it's important to learn the basics and then of course you can always do the easy way and use whatever library or framework you prefer to use for work so let's jump right in here so the first thing we'll do is run npm init and then we're going to go through a wizard to actually fill in some values for our package.json file now once we have the package.json file step two is we need to install typescript as a package into it we can do that through this install typescript command notice we say save dev because typescript doesn't run in the browser at runtime in other words we're not going to ship typescript to our customers as part of our application it's only used on our end for us as a developer now once we've done that we're going to make an easy command that can call into typescript and actually compile our code and now i named it tsc that's the value on the left there the value on the right is actually going to point to what gets installed with typescript and i'll show you that coming up now step four is we then need a compiler settings file because we're typically going to override where the code it generates gets put into what folder do you want it for example how strict is it i like it pretty strict i like the guard rails so i don't crash off the canyon walls as i talked about in the last video so we can do that with this npm run tsc now that's going to run this previous tsc command but then notice we add dash dash enit on the end i'll talk about that extra dash dash here in just a sec now that'll add the ts config.json typically you'll configure that a little bit tweak it to your settings your preferences this file is going to look like the following you basically can define the target as you can see here some module information where the code gets output and some other settings such as do you want to be able to debug into your typescript files typically you do when you're in development mode and there's some other strict settings you can turn on to add more guardrails once we do that we're gonna write our typescript code in this case notice we just have a simple add function like i showed in the previous video and then from there we're off to the races we can actually build our typescript code so with that let me go ahead and walk you through these general steps so i'm going to switch over to vs code and you're going to notice there's nothing up my sleeves here completely empty so the first thing we're going to do is mpm e-nit now that's going to walk us through a little wizard so we'll just type yep that looks good and voila i now have a package.json file all right so we would typically change some of that but we're off on the right track now step two was we come in and we say npm install and we want to install typescript but i want to save it as a development dependency not a runtime dependency something just used on my machine or possibly on a build server now this should be super fast and there we have it now notice in this node modules that was added we have a bin there's your tsc right there now we want to provide an easy way so i don't have to know the path to this dot bin and node modules and stuff like that so i'm actually going to change this test since right now it does nothing to i'm just going to call it tsc you could call it my build you can call it whatever you want actually that's valid and then we're going to say tsc and the package.json and node in general if i just put that it will automatically look in here and find that for us so it kind of simplifies the process now that's great we now have a package json we now have our typescript installed as a node module or package but we don't have any compiler settings at this point for typescript so what i'm going to do there is say npm run tsc okay but i don't want to compile i actually want to initialize a ts config file so let me hit enter and notice this now generates this ts config.json now if you're wondering why i put this it's kind of like saying okay i'm done with this part of the command it's almost like putting a period on the sentence and then the dash dashing it is like the next sentence now then do this if you don't do that it won't work right in some cases so that's why we put that extra dash dash there kind of ends the first part and then moves on to the second all right now we have our ts config but does it have everything we want well it actually has a ton of stuff you'll see don't let that intimidate you normally you'll just have a pretty small ts config depends of course but i'm going to change this up we don't want to target es5 because that's pretty old these days so we're going to do es2017 for module even though i'm not doing modules yet in this particular demo but i'm going to change it es2020 we're going to come down and say source maps true that's going to allow for debugging i do want to output my code into a specific folder otherwise it'll put it right where your source code is right where your ts file is which we're going to add next but i'm going to make a folder called dist so at the root of the project when we build it's going to generate a dist folder and that's where the javascript files would go so now what we can do is we have our package json we have typescript and we have a compilation file now we're kind of ready to go we need to add some typescript so i normally create an src folder you'll see that in most projects for source and then we'll add a new file let's just call it main.ts because it's kind of our main file right now it's our only file so we'll do a function add and i'm going to do x and y i showed this in the previous video and we'll return x plus y now notice these are red parameter x implicitly has an any type well that's because the strictness i don't think that's a word but i just made it is turned up really high for this project again it's adding these guard rails so that we do things we should be doing when we use typescript what are x and y right now they're anything okay that's normal javascript they could be a variable that's of type boolean they could be i said variable parameters kind of more what i mean of a string or array well we want to now be very specific these are numbers we're adding after all and so we're going to go ahead and add in that now that is our entire file extremely basic i realize but it gets us started so the next step is now we want to compile using this tsc so to do that notice i don't have a dist folder yet but i can now run npm run tsc and that's all just tsc and there we go we now have a dist folder there's our main js notice it stripped out all the typescript stuff it stripped out the guardrails because now we're ready to run it in the browser and it added a debug file i'll show you a little bit about that coming up here shortly now those are the main steps to get started with typescript and we could go even further we could add webpack or parcel or a bundler to take these scripts like main and compress and bundle them so that we could ship them to production but we're gonna stop right here for this particular video now i already have a project that has all of this in it let me switch over to that i've added just a little bit more just to show you so if i go into package json you're going to see the tsc i also added a little web server that'll run on localhost on our machines just called http server and when we run this http server command what it's going to do is go ahead and launch a web server and then launch the browser and i'll show you that in a second so let me go ahead and build we know how to do that run tsc so let's get our dist folder out there we go and then i added an index.html here that simply points to that it then calls the add function this loads and then updates the dom the document object model this little guy right here with the result so we should get nine obviously if my math is correct so let's go ahead and try this out so i'm going to say npm run http server now that should launch my browser and there we go let's refresh make sure it's working okay we get nine now i want to show you something really cool to wrap up here if you're new to this one of the arguments i used to hear from people that really hadn't done typescript and i don't know if they were just scared of jumping into this world or what it was but i hear these arguments oh don't use typescript you can't debug it well as long as you turn on that source map that i showed you and let's go back to that really quick that's right in here and i turned on source map true that's what caused this file to be generated now you might notice at the bottom of the main it adds a link to that map file we call it it's a debug file now let me show you what that debug file does let's go back to the browser i'm going to hit command p or control p if you're on windows and i'm going to type main and then notice main ts main js main.js is what's running in the browser right now main ts is my source code so you'll notice the paths here in the dist and the src now what's nice about this is i can actually come in this is now my typescript this is not the code that's running in the browser but it will link the code that's running in the browser back to the typescript and i can set up a breakpoint here hit refresh and notice it just hit it and we get the x and y values i can mouse over those get four and five and then to continue in this case we could just hit the little play button here or here and it writes out nine again like you saw earlier alright so to wrap up here that's how you can get started with typescript that's how you can build it get everything configured now if you want an example of the project i just showed you go to this github.com dan wallen getting started with typescript hopefully that long name makes it clear what it is i'll be putting a lot more of the demos coming up in the other videos into this particular repo so feel free to either clone or download the zip and then you can run the exact project just follow the steps in the readme that you'll see so thanks again for tuning in stay tuned for the next video please like and subscribe so you can know about it and we'll see you next time