TypeScript Tutorial #2 - Compiling TypeScript

a rather than gang so now we have typescript installed on our computer we can go ahead and create some typescript and compile it down into JavaScript but before we do that I just want to get you up to speed with where I am with the whole setup of this little project we're going to create so I've already opened up vs code and created a folder called typescript tutorial inside that there's three files right here index dot HTML sandbox CAS which is empty at the minute and also styles.css now I've already written the HTML and the CSS because this is not an HTML course or CSS I don't have to write this out from scratch and waste your time but you can grab this template from my github repo right here the typescript tutorial repo the link is gonna be down below to this page and you can grab the index from here and the Styles from here so you can just go in and copy and paste them into your local files but I will quickly go over them just to show you what we've done this is the template for the mini project that we saw in the last video that we're going to create throughout this series so it starts off with a head a couple of meta tags then a title then we link to a style sheet called staus dot CSS over here which we'll see in a second then we have a div with a class of wrapper and h1 and down here we have a ul with a class of item list now this is where all of those dynamic items are going to be output those payments and invoices and we're going to use types group to do that later on but below that we have a footer and inside the footer we have a form this is the form we're going to be using to add new items to this list ultimately now inside this form we have several different fields the first one is the type so is this an invoice or a payment the second one is either who this is from or - the third one is the details so what is this invoice or payment for and the fourth one is the amount that this invoice or payment is far as well then we have a button to submit the form finally we have this little link at the bottom which is linking to possibly one of the best websites on the Internet and then we have a script tag linking to sandbox dot J s now we'll come to that in a second but first of all styles dot CSS is over here as well is the thing that is styling up the webpage now I'm not gonna go through all this and bore you because like I say I think you should probably already know a little bit of CSS if you don't got a whole series on it right here on YouTube but you can peruse through that at your own leisure now that if I want to preview this in a browser then I've got a package installed called live server so that's over here and you can see this one right here I've installed this package you can do that by searching for live server up here and install it and that allows us to spin up a local development server so we can preview our work in a browser so all I have to do now I've got that package installed is open up an index file or rather an HTML file right-click it and then go to open with live server then it should open up inside a browser forest so there we go that's what the project looks like so far and we're going to add all kinds of interactivity to this as we go on through the series but the first thing I want to do is go through the basics of typescript now we saw before we have this sandbox j/s file but we don't want to write j/s we want to write typescript so let's create a new file for typescript so I'm gonna call it sand box dot TS that is the extension for typescript files now in here I can start to write my typescript and like I said before it's very very similar to JavaScript so I can do all of the same things in typescript that I could do in JavaScript for example I could say Const and then I'll give this variable a name character for example and set it equal to a string that's absolutely fine to do in typescript it's the same as JavaScript and I could then say console.log the character to log this to the console okay and just like in JavaScript I could also interact with the Dom using things like the query selector so I could create another constant and call it inputs and set it equal to document dot query selector and we want to in fact query select all and we'll grab all of the input tags so that will do exactly the same thing as in javascript we can do this it grabs all of the inputs from our index file over here now I think there's three of them one two three and we get a collection of those inputs stored right here and if I wanted to I could log those to the console so consult dot log inputs now if I save this and come over here and open up the console then nothing is actually gonna be locked to the console and that's because we've written our code in typescript right here but our index file over here is linking to the sandbox dot j/s the JavaScript file so this isn't actually being loaded in the browser but even if it was loaded in the browser it wouldn't work because the browser doesn't understand typescript so what we have to do is compile this down into JavaScript even though this looks exactly the same as JavaScript it's not it's a typescript file it's typescript code so we have to compile this down into a JavaScript file this one right here in order for it to be understood by the browser because then index is linking to that javascript file and it should work so how do we do this how do we do this compilation from this file typescript into JavaScript well all we need to do is open up a terminal so I'm going to say terminal new terminal make sure you're in the correct directory the same directory as our sandbox files right here and then we say TS c that stands for typescript compiler and we can use this because we installed typescript in the last tutorial that's what we did it for and then we can say we want to convert or compile the sandbox ES file into sandbox dot J's file right so we want to take this code and we want to compile it to JavaScript and output it into the J's file this one right here now when the output file is named the same as the input file sandbox and sandbox then we can just take off this last bit right here and typescript automatically compiles it to a file with the same name but just with a javascript extension by the way if this didn't exist it doesn't matter it will go ahead and create it for us it doesn't have to be there to begin with so if I press ENTER now it's going to compile this and it's going to create that sandbox j/s file forest and this almost looks exactly the same we can see we have two variables we're not using Const because remember that is a slightly newer feature in JavaScript and it's not supported absolutely everywhere so it makes this into an old version of JavaScript which is fully supported everywhere so we have these two variables and we have our console logs almost exactly the same as this now notice this I've got two little errors right here and that under the constant names if I hover over these it says that this character constant cannot read Eclair block scope variable character so this is happening for these two variables because we've got two variables one over here and one over here named exactly the same if you closed this that error goes away so you don't need to worry about that error it's just because we had both files open at the same time and it's seen some kind of conflict between those but that doesn't matter because the browser is never loading got this typed grit file okay so now we've compiled that we have our code over here if we then go over here to the browser then we see those things logged to the console so that's worked and that's how simple it is my friends to compile typescript into JavaScript now if I go over here I'm going to do something else I'm going to do maybe a for each loop on these inputs because remember this is a collection of inputs it's a node list and we have three items inside it we can use for each on a node list just like in JavaScript so I could say inputs dot for each and I'll do a callback which takes each input and inside I'll say console dot log that's input okay so it's going to cycle through that collection it's going to take each import and it's going to log that to the console each time around so I've saved this but remember we still need to compile it down again it doesn't automatically do that so we need to now say again TSC sandboxed es to compile it down into the javascript file and now we can see that loop right here the for each loop so now if i go to the browser again we can see over here we get those three input fields awesome so at the minute every time we make a change to this stuff over here the sandbox dot es file we have to manually or recompile it by saying TS c sandbox es now it would be nice if we could just run this once and then every time we make a change to this file and save it it automatically compiles it down again into this file and we can do that we can say c SC sandbox dot es space hyphen W that stands for watch and press enter and that means that typescript now is gonna watch this file sandbox es and every time we make a change and then save it it's going to recompile that into this automatically so we don't have to run it again so that's pretty nice so what I'm going to do is just change this for example to Alois you and the press save it's going to recompile it we saw that right here if there were any errors it would tell us down here and over here we can see now Luigi and if we go into the sandbox EAS we can see now we see the new value for this variable so there we go my friends that is how we compile typescript down into JavaScript so now we know how to do that let's get started on the different types that we can use in typescript

Channel: The Net Ninja

Views: 86,130

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: iTZ1-85I77c

Length: 10min 30sec (630 seconds)

Published: Thu May 07 2020