Getting Started With TypeScript

Welcome reader to another interesting and informative blog. This blog will provide an overview of what TypeScript is and how you can get up and running using Typescript.

What is TypeScript?

TypeScript is a typed superset of Javascript that compiles to plain Javascript. It can be used with any browser or operating system since in the end the code that gets sent to the browser is just Javascript. TypeScript can also be used with Node.js or in any JavaScript engine that supports ECMAScript 3 (or newer).

TypeScript provides static typing through type annotations to enable type checking at compile time. This is optional and can be ignored to use the regular dynamic typing of JavaScript. But type checking is what makes TypeScript a very powerful tool that allows you to scale your application.

JavaScript is an interpreted language. Hence, it needs to be run in order to check that everything is valid. It means you write all the code just to find no output when an error occurs and many times Javascript will not provide an error message. This results in you having to spend hours trying to find the bug(s) in your code. The TypeScript transpiler provides the error-checking feature. TypeScript will compile the code and generate compilation errors, if it finds some sort of syntax errors. This helps to highlight errors before the script is run, thus saving you time and many headaches.

How to get started.

The first step needed in order to use Typescript is to install it globally on your computer by using NPM (Node Package Manager). In case you are new to NPM, to use it you need to have Node.js installed on your computer (for help with Node.js installation click here). To check what version of Node.js and NPM you have just enter the following commands on your terminal:

node -v
npm -v

After making sure that you Node.js installed in your computer, enter this command on your terminal:

npm i -g typescript

This will install TypeScript globally allowing you to use it within any project that you have on your computer. We are now going to create a very simple project using TypeScript. Below you will see an image of the file structure of our project.

file structure

As you can see I have a folder called TypeScript and within that folder I have an index.html file and an main.ts file. Just as a side note I will be using VS Code as my IDE and I highly recommend it, especially for developers that use or are planning on using TypeScript. You can see we have a main.ts file and here is where you will write your TypeScript code. As a reminder even though the file has an .ts extension you can still write plain Javascript.

Now we take a look at the code in our index.html file.

index.html

At first glance the code within the index.html file looks like the code you typically see on a .html file. But I want you to pay attention at line 10 of our code we have script tag that connects to an main.js file. If you take a look at the image showing our project structure we do not see a main.js file. And you might be thinking shouldn’t index.html connect to main.ts?

There is a very important reason why my index.html file is connecting to main.js and not to main.ts. As I mentioned before TypeScript gets compiled to Javascript and the main reason for this is that current browsers do not understand TypeScript code. The TypeScript compiler will create a new file with the same name as the TypeScript file, but with a .js extension (default behavior).

To run the TypeScript compiler, which we installed when we ran the npm command to install TypeScript globally enter the following command on your terminal:

tsc main.ts

Basically this tells the TypeScript compiler to compile the code in my main.ts file and create a new file called main.js. In case you want to use a different name for your file instead of the default one, you can run this command instead:

tsc main.ts --outFile <filename>

To test that everything is working properly I added a bit of TypeScript code in my main.ts file. Below is an image of what the code is.

main.ts

This is basically a function that expects a name argument of type :string and the function will console log a greeting and not return anything hence :void after the parentheses. This is how you can do basic type checking in TypeScript. In the future I will definitely write a blog explaining this further, but I thought it was appropriate to explain a bit what the code is doing.

Now if run the tsc main.ts command on our terminal we should see a new file in our project folder main.js that contains our compiled code.

file structure

main.js

An extra tip when you are using the TypeScript compiler, if you don’t want to be entering the tsc main.ts command to compile your code every time you save your file you can add the -w flag at the end of the command. It would look something like this tsc main.ts -w. This will run the compiler in watch mode and it will automatically compile your code when the file is saved.

That’s it, you can now start to use TypeScript in your projects. Obviously there is more to TypeScript than what I explained in this blog. If you are really interested in TypeScript I recommend diving into the official documentation. Thanks for reading and I hope you learned something interesting about TypeScript.