Installing & Using TypeScript

Instructor: So, TypeScript can help you catch errors earlier. However, there's one big disadvantage of TypeScript, and that is that this code, this TypeScript code stored in this .ts file does not run in the browser. You can write TypeScript code in your projects, but you can't run it like this in the browser. Now, it's different if you're building for the backend, for Node.js because there are tools and runtimes that do allow you to run TypeScript code without any extra build step. But when it comes to running it in the browser, it does not work there. Instead, what you need to do with TypeScript code like this to make it work in the browser is you need to compile it. You need to convert this code from TypeScript code to pure JavaScript code. A compilation step is needed. And that's why TypeScript is not just about writing TypeScript code, but it's also about compiling that TypeScript code. That's why the official documentation page also has a download area where you find instructions on how to download the TypeScript compiler, a tool that will convert the TypeScript code to JavaScript code. Now, you can simply follow the instructions here on this page. I will follow this instruction here, which will install TypeScript globally on my system. Or to be precise, which will install the TypeScript compiler globally on my system, so that I can use it anywhere in any project. Later in the course, I will also show you how you can add TypeScript to individual projects and how you can implement this compilation step into a more general project-built process. For the moment, let's focus onto this global approach, though. Now, this approach here uses npm to install TypeScript as a global tool onto your system. And npm is a package manager that comes together with Node.js. Therefore, you should visit nodejs.org, and from there, download the latest LTS version of Node.js since this will include this package manager, this npm tool. Once you did install Node.js, and with it, npm, you can run this command here in your system command prompt or terminal to install TypeScript globally on your system. So here, I'm on Mac OS, so I opened up my terminal, and I'll run npm install -g to install it globally, typescript. On Windows, it's exactly the same command, you just use your default command prompt to run it. Now, you will need to make sure that you got Node.js installed as mentioned, and on Mac OS analytics, you might need to add sudo in front of this command to give it the right permissions. You might get a permission error without sudo, on Windows, this will not work and will also not be needed. Now, you might be prompted for your password, but thereafter, this will go ahead and install TypeScript, or to be precise, the TypeScript compiler onto your system. And with it installed, you can go to your project where you're using TypeScript, open up your system terminal there as well. Either the one integrated into your code editor as I'm doing it here using the terminal that's integrated in Visual Studio Code, or you use your default command prompt or terminal outside of the editor, and you navigate into your project folder via the CD command. Either way, you must make sure that you have your terminal open, and that you navigate it into this project folder, so that in there, you can start the compilation process of this calculator.ts file by running tsc, and then the name of the file, of the TypeScript file that contains the to be compiled code. tsc is a command that will be available since you did now install TypeScript globally. This will invoke the TypeScript compiler, and it will go ahead and produce a calculator.js file in this case. And if you inspect this file and you compare it to the TypeScript file, you'll see that it's pretty much the same code, there have only been some minor changes. Most importantly, these TypeScript features like this explicit type assignment here, have been removed since that was non-standard JavaScript code. It wasn't code that would run in the browser or in any other JavaScript environment. And it's then this compiled JavaScript file that you would import into your HTML file. For example, since this file now does contain executable code. By the way, if you had an error in your TypeScript code. If you remove this plus here, for example, you don't just get a warning and an error here in your IDE, which is very convenient, since that helps you catch the error early. Instead, if you save this, you would also get an error if you try to compile this TypeScript file. You get this error message here as well then. However, since you also get it in the editor, you typically can find and fix such problems without even starting the compilation process, which is very convenient. But that's how you can compile, and then also run that TypeScript code in an environment that no built-in TypeScript support. As mentioned, later, I'll also show you how you can automate this compilation step for more complex projects that consist of multiple TypeScript files, because you don't want to individually compile these files step by step, file by file manually there. But we'll get there later.