Typescript setup and Basics

Introduction

Hi there! In this post we are going to dive in the basics of typescript💧. So without wasting time lets get started ⏱️.

Setup

Before starting lets setup.

1) Open the terminal

npm install -g typescript

This will download typescript in your pc. If you already install typescript then you can also check your version with

tsc -v

2) Make a folder for code.

You can make the folder anywhere.
And now open it with vscode or any editor you use. Now, create index.ts file.

3) Initialize typescript

Open the terminal in the same folder and write

tsc init

And now its done. Lets get to coding. Also if you are using vscode you can install code runner extension for running the file output.

What is Typescript ?

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Now you will say ok I get but I dont get it 😅

For now just keep it mind that typescript is javascript with type.

Now lets first write a small ts code then discuss about the difference between Ts and Js

Write the first typescript code

Now, open your index.ts file and write the code

  let str : string = "Hello world";
  console.log(str);

In this code we are just making a variable str and annotating it with :string . If you add :stringwith any variable then you can only set a string value to that variable.

It means that we are giving the str variable a type of string. And this is called type annotation. Thats why typescript is javascipt with syntax of type.

Dont worry about the code right now. We will cover everything one by one and also the type annotation again for a better understanding with defination.

Now lets check the output. Simply open your vscode extension and search code runner extension and download it. Now click on the play button on the top right side of the screen. So you will see the result that is Hello world. And that the first typescript code.

Difference between Ts and Js

Now, I think after writing the first code you have understand the difference that in type script we define type to the variable like string, number, boolean, etc.

Those who have learned languages like C or C++ can relate that when we define a variable then we write int , str , etc. to set the variable type and then we cant assign any another value to that.

But now you will think is it only limited to variable? So the answer is No. It is not limited to variable. You can set type on function, object, and much more. Also you can also create your own type!

Now, you will be like we want more examples🧐. Ok, lets annotate the function parameters.

    function add(x:number, y:number){
        return x+y;
    }
    const res= add(4,5);
    console.log(res);

Now, check the output. It should be 9. So here we are annotation mean defining type of number to the add function parameter. But if you give a string inside the add parameter then you will get an error.

Also, if you give less parameter to a function then you will also get a error.

Thats, a big advantage that it will give you an error if you put a wrong value or give less parameter then required. And you dont need to look for those small bugs. It also make the code maintainable. That why we use typescript 😁.

Conclusion

So in this post we learn about typescript from beginning and learned how to install it, difference between ts and js and also the advantage. We also write the first code.

Now, I think it is clear why we use typescript. Some people might bored reading that long post😅. If you have any doubt you can ask. And also suggest for the next post ideas in the comments.