In my last article I explained what Typescript is and why we should use it. You can read the integral text here:
Article No Longer Available
But how exactly can we use it? Typescript doesn't run in the browser. It needs to be compiled into regular Javascript and it lives inside files with a .ts extension. If you want to first get comfortable with the syntax and avoid installation, you can use it online, inside a playground that can be found here: https://www.typescriptlang.org/play/. The way it works is that you write Typescript code on the left side and see the code it compiles to on the right side (this works on any OS, it's not Windows specific).
If you want to have it on your machine and use it anytime you wish, you'll need to install it. The way I personally use it is with Visual Studio Code, as an extension, but when I first started learning the syntax, I had it installed via npm (Node's package manager).
Steps to install Typescript on a Windows machine using npm:
1. Install Node.js. Unless you need to install a different version (like for example if you're doing a tutorial and the tutor tells you to install a specific version), I would advise to install the latest. You can find it here: https://nodejs.org/en/. Use the LTS (long time support) variant. If you want to check if node has been installed successfully, go open the cmd and type node -v. If everything is ok, you should see something like v12.16.1 (this is the current version I'm using).
2. Install Typescript. Run the following command in the cmd.
npm install -g typescript. This will install Typescript globally. In the same manner, if you want to check for Typescript being installed, type tsc -v in the cmd and you should get back something like Version 3.8.3 (it's possible that you'll be using a different version so you'll get different numbers).
3. Create a file with a .ts extension. On your machine, create a file with a .ts extension. I called mine firstTest.ts. Open it in your editor (for simplicity, I'm using Notepad++) and write any Javascript you want inside it. I wrote:
4. Create a .js file out of your .ts one. Remember, Typescript can't be used like Javascript. It first needs to be compiled (translated) to regular Js. In the cmd, navigate inside the folder that contains your .ts file and run the following command tsc filename.ts. This will create, in the same folder, a new file with the same name but a .js extension. This is the step in which the "translation" takes place. What the newly created js file contains is basically all the Typescript we wrote, only compiled to Javascript. In my case, the Javascript code it's almost identical, because I didn't really use any of the Typescript features (notice though, the let ES6 feature was converted to a var).
5. Run your Javascript code using Node. To see the result of your code, we can run it using Node. So, inside the cmd write node filename.ts. In my case it will be node firstTest.js. The result I got was 5.
Now let's use some very simple Typescript code. We're going to explicitly set our two variables to be of type number. Ignore the syntax, the example is strictly to show you how the Javascript code looks like in the end.
Notice in the .js file the types don't show up and the let has been convertted to a var.
One thing to keep in mind is that every time you make a change in your .ts file, you must run Typescript so the changes also appear in the .js file. For less typing, you can combine the two commands like so tsc filename.ts && node filename.js (the extensions' names can be omitted, and our code will look like tsc filename && node filename).
In the next article I'm going to start going into more details and discuss about basic types in Typescript.
Image source: Keila Hötzel/ @keilahoetzel on Unsplash
Latest comments (5)
Good
Good guide for beginners!
Thx, I hope so :).
Nice !!!
I think its worth mentioning about “watch” parameter. Which will keep watching for changes in a .ts file and automatically transpile to the corresponding .js file.
True. To be honest I don't remember why I didn't mention Typescript's watch mode.