Installing & Using TypeScript

English [Auto] Here is this same example basically in a real project you'll find this simple project the index HMO file and this javascript file attached to this video in a zip file. You can simply open this and then open to engage Tim Al file. You can also open the code in any text editor of your choice. Here I'm using Visual Studio code and it will come back to my exact setup later in this module. For now you can just open these two text files with any text editor. Now what you'll find in there is this javascript file which interact with this index. H Tim Al file and in that index H Tim I'll file you'll find two inputs and a button and a new JavaScript file which gets imported here. We basically reach out to these elements then we have a function year end end event listener on the button that triggers the function and logs the result of the function here in the console. Now if we simply open that index HMO file by double clicking on it in the Windows Explorer or the Mac finder so that it opens up in a browser. What you'll see is this two inputs and the Add button. And here I opened the browser developer tools as well. Now if you enter 10 and 5 here for example you might expect to see 15 as a result. You're on the right but instead you'll see one hundred and five. And this shows us a weakness of JavaScript here. This is not a technical error it's not an error which is thrown but it's a logical error in our application. Now where is this error coming from though. Well here in javascript I reach out to these two inputs and when the button is clicked in the end I get the values of the two input elements and I passed them here to add. And here it's important to know that in JavaScript when you access teh value of an input element it's always a string always no matter which type of input this is if this is of type no or not. It's always a string. So I'm passing into a strings to this function the end. And if you add two strings in JavaScript they get concatenated instead of added mathematically which is why we see one hundred and five ten and five concatenated. This is the issue with JavaScript here and this is something where typescript can help us now without typescript we could of course add if check here and check if the type of num 1 is equal to number and if the type of num 2 is equal to number and if that is the case then I return my calculation like this. Else I might throw an error or I at least convert both to numbers by adding a plus in front of each parameter here. Now this is some code we could write maybe a bit more refined than this in javascript and with that we would ensure that we convert numbers or the inputs to numbers if they're not numbers yet. So with dad if I reload this and I repeat this now we get 15 because of our changed code. So of course you can do it as in JavaScript and does this vanilla javascript nothing typescript [REMOVED] about it but we wrote some extra code for an error which I actually would like to prevent in the first place. I don't want that this happens. I want to make sure that we can't even pass strings here to add because ad should be a function that only operates on numbers so that in there we don't need to check whether we get a number or not. So I want to keep this function in the state it was before I went to this function here. Just like this and that is where typescript can help us. So typescript can help us in such situations as I just showed. Now in order to see how it helps us let's install it. So in typescript Lang dot org you can click on download and dare you'll learn how to install it and we will actually install it with this command which uses the NPM tool and the NPM tool is part of the node today as package. So even though we're not going to write no trace code here we still need to install node J.S. simply because behind the scenes that will also be used by some tools we use. And when we install no chance we also install NPM the node package manager a tool which we then can use to install typescript globally on our machine. So simply visit no transport org and they're installed the latest version you'll find here simply click on this button it will then download and install or you can walk fruited installer. It is supported for all operating systems and once you have no charts installed you will be able to run this command simply open up your normal terminal or a command prompt and then copy in that command important on Mac and Linux. You might need to add sudo in front of this to get the right permissions on windows this will not be required. So simply make sure you then install typescript with this command entry or password in case you should be prompted for it. And with that you got typescript installed globally on your machine. Now what does this mean typescript installed. Well remember that typescript is a programming language but it's only a programming language that works because we also have this compiler. This tool which compiles a javascript so in the end what we installed here is the compiler and everything it needs to know to understand typescript code to convert to javascript. So with this we have the compiler installed and we can run the TSC command now which invokes these types of compiler to compile a types could file to JavaScript so to see this in this project we worked on. Let's simply add a new file using t s start T S for example any name you want but the extensions should be dot t s which stands for typescript. Now let's copy that JavaScript code into the types could file here in the visual pseudocode. I immediately get some errors which we now will fix and this is one great advantage of typescript. If you're using the right idea and my strong recommendation really is the visuals through your code and I will come back to that later then you already get great support in the idea when working instead of types could files here already it basically lets types could analyze my code and identifies some weaknesses which is great because that's exactly what I want. So here in this example let me delete the jobs could only J File and with that some of the arrows are gone because it identified that some constants and so on were used in multiple files but it still gives me an error down there. And what you see for example is that it's not sure if there really is a value property. Now that's a mistake I didn't even consider before in javascript but it's true. I'm selecting an element by idea here. Now typescript can't know if this will really work. Maybe I have a typo in here. In this case I wouldn't be able to select an element this element simply wouldn't exist on the page. So we might have a typo in typescript does not analyze your age HTML code to find out if this works. So for one does might fail but even if it succeeds and we select an element there it doesn't have to be an input element. It could be any other element and most aged two male elements don't have a value property you can access and this already is great typescript forces us to be more explicit to be clearer about our intentions and to double check our code and for example here and you don't need to understand all that syntax we will learn it step by step from the courts. But for example here we could let TIBCO know that we are sure that we will get an element by adding an exclamation mark. This basically tells typescript this will never yield null. This will always find an element. And as a developer I of course know that this will always find an element because I double check that idea and as see yeah I have that idea here. Now in addition I also know it will always be an input element so we can use as HD email input element as syntax called typecasting which I will always explain in greater detail later to let TIBCO know which type of element this will be we can apply this to the second element as well. So just to be really clear here this is typescript syntax I can use this exclamation mark here and I can use this type costing here because we are in a dot t s file we are in our types could file we will comp. is to JavaScript this would not work in vanilla javascript this is not a way level there with this we are forced to be clearer about our intentions and to really think about our code and double check it which is great but that's not even the biggest advantage the biggest advantage is the additional types that is what gives typescript its name after all. And here I am not saying anything about the types of data. This function operates on if we hover over one of these parameters we see this anything here and in the end this is typescript saying to us I don't know what's in there it could be any type of value. Now we can add a more explicit type in typescript files so not in JavaScript files but in typescript files by adding a colon here and then specifying the type for example no doing this here and doing this here with this extra syntax which typescript which does compiler understands we're telling typescript that this year will be of type no and this will be of type number and therefore now we get an error here again and we don't just get this error in the IDA e by the way we all get it if we tried to compile this code because that is ultimately what we need to do right now to compile this I will open a terminal and here I'm just opening my terminal or command prompt which is integrated into this idea it's the regular system command prompt the regular system terminal I was using here as well just already navigate it into this folder. So if you are not using some built in IDA e terminal you can use your regular one but C D navigate into debt extracted starting folder where you added your types could file and once you are in that folder you can run T as C Dad will invoke this typescript compiler we installed earlier on using dash t s dot t s and if you run this you will actually get an error you will still get a javascript file because by default typescript will still compile it to JavaScript you will also learn how to suppress this later in the course but it gives you a compiler error while doing so it tells you that argument of type String is not a sizable 2 parameter of type no. So the problem here is that typescript understands that what we get on the value property of our input element will be a string we all see this here in the IP and we can't pass this to add because dear we don't want a string. We want a number. So we have to fix this by for example converting this to a number here by adding a plus. And as soon as we do this we can compile this code again by repeating that command. And now it compiles without errors. It gives us this using typescript or JavaScript file and now it shows some errors again because it doesn't understand that it will never use both files at the same time here again. This is all something which will get better later in the course once we configured as we can ignore this for now. So it gives me this file and if we open this we see something interesting in here. We see that there of course our types are gone. This costing here is gone. We have vanilla javascript again. So if we have a look at our tiles could file here. We see that there we have all these nice additions. But as I mentioned these are just types of features. When you compile two javascript they are used to evaluate your code and to find potential errors but then they all stripped out and we get regular JavaScript as output. So now we can go to our index age time I'll file an import using t s start J.S. and that's important. Always import JavaScript files because the browser can't run typescript. We need to import the result of our compilation. And now with that if we reload this we have our working code because now we have proper javascript code where we fixed this issue by costing our inputs before we pass them to the function. But we were able to fix these issues because of our type annotations here. And as you saw we had to write some other parts of the code in a cleaner way as well. And dad is white high school is amazing. It forces us to write better cleaner and less error prone code.