An Overview and Setup of TypeScript as a Complete Beginner

In this article, we are going to have an Overview and Setup of TypeScript in our Local Environment.

TypeScript

It's an Open Source Language that builds onto JavaScript by adding some Extra-features, also known as Superset as JavaScript.

It can also be referred to as JavaScript + Some Other Features (Static Types being the Main Reason).

How TypeScript is different??

TypeScript is having many different types of benefits listed below:

• It Offers additional Features to JavaScript with Static Types.
• Using types is completely Optional.
• Compiles Down to Regular JavaScript.
• Can also be used for Front-End JavaScript as well as Backend with Node.JS.
• Includes Most features from ES6, ES7 ( Classes, Arrow Functions, etc. ).
• Types from 3rd Party Libraries can be added with Type Definitions.

So these were the basic TypeScript Benefits which a Vanilla TypeScript can Offer.

Types Of Programming Language

In Programming there are Two Types of Programming Languages:

• Dynamically Typed Language
• Statically Typed Language

Dynamically Typed Language

In this, the Types are associated with run time values and are not named Explicitly in your Code.

Example of Dynamically Typed Language :- JavaScript, Python, Ruby, PHP

Statically Typed Language

In this, the Types are Explicitly assigned to the variables, functions, parameters, return values, etc.

Example of Statically Typed Language:- Java, C, C++, Rust, Go.

But what's the Pro's and Cons of using TypeScript instead of Regular JavaScript

So there are many Pros and Cons of Using TypeScript instead of Regular JavaScript

The Pros are listed Below :-

• It is More Robust than Regular JavaScript
• Easily Spot Bugs
• Predictability
• Readability
• Popular

Whenever something good comes there comes some bad things with it also.

The Cons are listed Below :-

• More Code to Write.
• More to Learn
• Required Compilations
• Not True Static Types ( According to Some Programmers )

Compiling TypeScript

So Compiling TypeScript is one of the major head-ache you must be facing while working with TypeScript, So below are the benefits you might think that will come in handy while working with TypeScript.

• TypeScript uses .ts and .tsx extension.
• TSC ( TypeScript Compiler ) is used to Compile Down .ts or .tsx files Down to .js
• TSC can watch the files and report the Errors at the Compile Time.
• It may include .ts compilation by default.
• Most IDE's have great support for TypeScript.
• The tsconfig.json is used to configure how TypeScript will work.

So Lets Code it Down the Real JavaScript ( Not with the Slides but the Actual Code ).

Let's Install TypeScript

Since I am on Windows so Let's Install it Globally as TypeScript is necessary part of all of my Projects.

So Let's Try Hitting this Command

In Windows => npm i --global typescript

In Mac OS => sudo npm i --global typescript

You can try the Same Command as of Mac OS in Linux also I'm not Sure what command will be working for Linux.

After Successful Installation of TypeScript you can run this command to check if it has been successfully installed or not.

tsc -v

the output should be something like Version 4.4.2 as of on Date 10 September 2021.

So that was a Basic Setup of TypeScript for your local Environment.

Now Let's Write JavaScript + Type Safety I mean TypeScript

After Successful Installation Create a New Directory Named as typescript Learning ( Name it whatever do you like )

then Create a New file name should be something like <desiedNameHere>.ts ( Enter any name you want in place of 'desiedNameHere')

So let's write normal JavaScript here let id = 5;

and then fireup your Terminal and you can now type this command to convert Regular JavaScript to Regular JavaScript ( as of for now ).

tsc filename.ts ( file type is not mandatory just specify the name )

What it will basically do is compiles your Code available in .ts format filetype to Regular JavaScript to ES5 ( which is set by default ).

Now you can check the compiled down JavaScript Code in the File Named as the same name but with .js extension.

Now here you can see that the TypeScript Compiles the Code to ES5 which is set by default and because the let and arrow functions were released with ES6 so it will not make use of that ( for now ).

You can also make this TypeScript Compiler to watch this Code and Compile any of the TypeScript code we write down to Regular JavaScript.

You can do this by hitting this command

tsc --watch <fileName>.ts

So For Now let's Try to convert the TypeScript Code to ES6 JavaScript

Setting up tsconfig.json

Let's setup the TypeScript and edit the way how TypeScript Code will compile down the typescript code to Regular JavaScript.

To Setup you must first hit this command in your Terminal

tsc --init

this will basically create a tsconfig.json file and will let you any of the Setting which might be usefull in TypeScript and the TypeScript will work on based on this file only.

So now Open up you tsconfig.json and find out where target is written ( Basically you will find it on Line number 7 )

Change the Target to ES6 if you want.

So on my Preference I try to Locate my Compiled Regular JavaScript to another Directory and TypeScript files to another Directory.

So I am gonna change the outDir setting (you will find that on Line Number 17 ).

and Change that setting to ./dist

and also Add a New Line after that and make it as rootDir and set it's value to ./src.

Root Directory is basically to get the Source TypeScript files.

So Now move t=your previous TypeScript file inside of a Directory Named as src where the TypeScript compiler will look TypeScript files for.

and Now Let's Compile the TypeScript file, but this time we will compile all of them without specifying any particular File.

Hit this command in your Terminal

tsc --watch

What this Command will do is basically just watches every files inside of the SRC directory and will convert them to Regular JavaScript if it found them to be a TypeScript file.

you can also just run tsc that will just compile the Files and will not watch for any further change in them.

Conclusion

So for Now that was a basic Setup for Vanilla TypeScript ( as my mentor Said ) and this was a basic file Structure of TypeScript for a Complete beginner.

Now we will get into TypeScript more deeper but that's for some another Article.

Until then I will be Write the Dev log at this platform only just be sure to check this up.

BTW you can Subscribe to my Official Blog Platform codeitdown and get yourself Subscribed I will make sure whenever I get a Good Article over there I will Personally E-mail you for that without any Spam Mail.