Get Started with TypeScript

#typescript #webdev #frontend #web

Introduction

In 2022, TypeScript is a great tool to learn. Most companies now write their codebases using TypeScript. So it is high time to know about it and add it to your skillset. In this blog, you will know what TypeScript is and why you should invest time in it.

What is TypeScript?

TypeScript is a superset of JavaScript. It is a tool that is based on JavaScript. So you can use all your existing JS features in TypeScript. Also, there are some exclusive features of TypeScript are there. But as the browser doesn’t understand TypeScript, so we have to convert the TypeScript code to JavaScript to execute it in the browser. It also gives you an error check in the compile time.

TypeScript vs JavaScript

TypeScript is a superset of JavaScript which means all your JavaScript code will also work in TypeScript. But TypeScript has some of its features that don’t work in JavaScript. TypeScript works in compile time but JavaScript works in runtime. TypeScript file has a file extension of .ts and JavaScript has .js.

Why you should learn TypeScript?

JavaScript is a weekly typed language. It means you can’t declare a variable to accept only one type of data. This kind of open behaviour of JS many times creates problems for the developers. In compile time, it doesn’t show any error but in runtime, means when the code is executed in the browser, it shows the errors or wrong output.

TypeScript is for developers to use. Browsers don’t understand TypeScript. It only understands JavaScript. So why you should learn TypeScript?

TypeScript gives us a strict environment where you can write your JavaScript code in a much more concise and declarative way. TypeScript uses a compiler to convert this code to JavaScript. Now at the time of compilation, the TypeScript compiler gives you an error if you write any wrong code. Also, it shows red lines below the code if you write any invalid TypeScript code. Also, you can write modern JavaScript codes in TypeScript, and the compiler will convert that to older JavaScript, which works on all browsers.

Installation

Go to https://www.typescriptlang.org/ and there you find all the documentation and installation guidelines.

Firstly, you need to install node.js to your system. Go to https://nodejs.org/ and download any node.js version of your choice.
You need to install the TypeScript compiler to run our TypeScript code. Install the TypeScript compiler in your system using the following command:
```
 sudo npm install -g typescript
```
After installing the compiler you can create a file called helloWorld.ts and write some code there
```
 console.log("hello world");
```
Compile the helloWorld TypeScript file using the following command:
```
 tsc helloWorld.ts
```
You can’t run the typescript file. So this command will generate a helloWorld.js file in your current path. You can run this JavaScript file using the following command:
```
 node helloWorld.js
```

Example

TypeScript has a ton of features but as it’s your first time, we are only going to discuss one feature of it called types. In TypeScript, we have something called types, where you can declare the type of variables like numbers and strings etc. In the following example, we are going to write a TypeScript function to add 2 numbers.

Open your favourite editor and create a file add.ts.
In the add.ts file write the following TypeScript code:
```
 function add(num1: number, num2: number) {
       return num1 + num2;
 }

 const sum: number = add('a', 20);
 console.log(sum);
```
In the above code, we have used a feature of TypeScript called types. We can declare types of variables in the code. Here we declare the type of num1 and num2 as numbers and the sum should also be a type of number we are setting. Now when we call the add function with a string parameter ‘a’ in it TypeScript compiler throws an error for that.

Now to compile the code run tsc add.ts in your terminal. This will generate an add.js file with an error in the terminal

 add.ts:5:25 - error TS2345: Argument of type 'string' is not assignable to parameter of 
 type 'number'.

 5 const sum: number = add('a', 20);
                     ~~~~
 Found 1 error.

Now you can see the power of TypeScript. It gives us an error and tells us where we are writing the wrong code on compile time. But it still generates the JavaScript file and you can run the JS file using node and see the output.
```
 a20
```
You can fix the code by changing ‘a’ with 10. Compile the code again using tsc add.ts. And after the add.js file is created you can open the file that looks something like the following:
```
 function add(num1, num2) {
       return num1 + num2;
 }

 const sum = add(10, 20);
 console.log(sum);
```
You can see there is no type of number is there. So the types we have in TypeScript are only for us to write error-free code.
You can run the add.js file using node add.js and get the following output in the terminal:
```
 30
```

Conclusion

In this blog, we learned what TypeScript is and why it’s important to learn, how to write a TypeScript code and run it. If you like this blog and want to learn more about Frontend Development and Software Enginnering, follow me on Dev.to.