In this article, we are going to have an Overview and Setup of TypeScript in our Local Environment.
TypeScript is having many different types of benefits listed below:
Using types is completely Optional.
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.
In Programming there are Two Types of Programming Languages:
In this, the Types are associated with run time values and are not named Explicitly in your Code.
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.
Whenever something good comes there comes some bad things with it also.
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.
.tsxfiles Down to
.tscompilation by default.
tsconfig.jsonis used to configure how TypeScript will work.
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
npm i --global typescript
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.
the output should be something like
Version 4.4.2 as of on Date
10 September 2021.
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')
let id = 5;
tsc filename.ts ( file type is not mandatory just specify the name )
What it will basically do is compiles your Code available in
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 do this by hitting this command
tsc --watch <fileName>.ts
To Setup you must first hit this command in your Terminal
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 I am gonna change the outDir setting (you will find that on Line Number 17 ).
and Change that setting to
and also Add a New Line after that and make it as rootDir and set it's value to
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
you can also just run
tsc that will just compile the Files and will not watch for any further change in them.
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.