Posted on 2021-09-16
By Aman Ojha
Published in New Tech Stack
at 08:34:37
In this article, we are going to have an Overview and Setup of TypeScript in our Local Environment.
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).
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.
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.
Example of Dynamically Typed Language :- JavaScript, Python, Ruby, PHP
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.
So there are many Pros and Cons of Using TypeScript instead of Regular JavaScript
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.
.ts
and .tsx
extension..ts
or .tsx
files Down to .js
.ts
compilation by default.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 ).
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.
tsc -v
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')
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
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.
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.
Recent comments(0)