Installing & Using TypeScript

Instructor: Here is this same example basically in a real project. You'll find this simple project, the index HTML file and this JavaScript file, attached to this video in a subfile. You can simply open this and then open the index HTML file. You can also open the code in any text editor of your choice. Here I'm using VisualStudioCode, and I 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 interacts with this index HTML file. And then that index HTML file, you'll find two inputs and the button and any JavaScript file which gets imported here. We basically reach out to these elements. Then we have a function here and an 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 HTML 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. The two inputs and the add button and here I opened the browser developer tools as well. Now if you enter 10 and five here for example, you might expect to see 15 as a result here on the right but instead you see 105. 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 pass them here to add. And here it's important to know that in JavaScript when you access the value of an input element, it's always a string. Always, no matter which type of input this is. If this is of type number or not, it's always a string. So I'm passing in two 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 105, 10 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 an if check here and check if the type of num one is equal to number. And if the type of num two 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 that, if I reload this and I repeat this, now we get 15 because of our changed code. So of course we can do this in JavaScript. And this is vanilla JavaScript, nothing TypeScript-ish 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 add 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 want 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 on typescriptlang.org, you can click on download. And there 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 JS package. So even though we're not going to write Node JS code here, we still need to install Node JS simply because behind the scenes that will also be used by some tools we use. And when we install Node JS, 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 nodejs.org and there, install the latest version you find here. Simply click on this button. It will then download and install or you can walk through that installer. It is supported for all operating systems. And once you have Node JS installed, you will be able to run this command. Simply open up your normal terminal or 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. Enter your 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. Now 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 into JavaScript. So in the end, what we installed here, it is the compiler and everything it needs to know to understand TypeScript code to convert it to JavaScript. So with this, we have the compiler installed and we can run the TSC command now which invokes this TypeScript compiler to compile a TypeScript file to JavaScript. So to see this in this project we worked on, let's simply add a new file using ts.ts for example. Any name you want, but the extension should be .ts which stands for TypeScript. Now, let's copy that JavaScript code into the TypeScript file. Here in VisualStudioCode, I immediately get some errors which we now will fix. And this is one great advantage of TypeScript. If you're using the right IDE, and my strong recommendation really is VisualStudioCode, and I will come back to that later. Then you already get great support in the IDE when working inside of TypeScript files. Here, already, it basically lets TypeScript 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 JavaScript only JS file. And with that, some of the errors 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 ID 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 and TypeScript does not analyze your HTML code to find out if this works. So for one, this 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 HTML 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 throughout the course. But for example here we could let TypeScript 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 checked the ID and I see yeah, I have that ID here. Now in addition, I also know it will always be an input element. So we can use as HTML input element, a syntax called typecasting which I will also explain in greater detail later, to let TypeScript 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 typecasting here because we are in a .ts file, we are in a TypeScript file. We will compile this to JavaScript. This would not work in the vanilla JavaScript. This is not available 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 addition of types. That is what gives TypeScript its name, after all. And here I'm not saying anything about the types of data this function operations 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, number. Doing this here and doing this here. With this extra syntax which TypeScript, which this compiler understands, we're telling TypeScript that this here will be of type number 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 IDE, by the way. We also get it if we try 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 IDE. It's the regular system command prompt. The regular system command terminal I was using here as well, just already navigated into this folder. So if you are not using some built-in IDE terminal, you can use your regular one but CD navigate into that extracted starting folder where you added your TypeScript file. And once you are in that folder, you can run TSC. That will invoke this TypeScript compiler we installed earlier on using dash ts.ts. 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 that course. But it gives you a compiler error while doing so. It tells you that argument of type string is not assignable to parameter of type number. 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 also see this here in the IDE. And we can't pass this to add because there, 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.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 configure this. 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 casting here is gone. We have vanilla JavaScript again. So if we have a look at our TypeScript file here, we see that there we have all these nice additions. But as I mentioned, these are just TypeScript features. When you compile to JavaScript, they are used to evaluate your code and to find potential errors, but then they are stripped out and we get regular JavaScript as output. So now we can go to our index HTML file and import using ts.js 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 casting our inputs before we passed 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 that is why TypeScript is amazing. It forces us to write better, cleaner, and less error-prone code.