An Overview and Setup of TypeScript as a Complete Beginner

An Overview and Setup of TypeScript as a Complete Beginner

{ Aman }'s photo
{ Aman }
·

6 min read

Table of contents

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 has 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, and ES7 ( Classes, Arrow Functions, etc. ).

  • Types from 3rd Party Libraries can be added with Type Definitions.

So these were the basic TypeScript Benefits that 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.

Examples 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 are the Pro 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 are some bad things with it too.

The Cons are listed Below:-

  • More Code to Write.

  • More to Learn

  • Required Compilations

  • Not True Static Types ( According to Some Programmers )

Compiling TypeScript

Compiling TypeScript is one of the major headaches you must be facing while working with TypeScript, So below are the benefits you might think 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 Let's Code it Down the Real JavaScript ( Not with the Slides but the Actual Code ).

Let's Install TypeScript

Since I am on Windows Let's Install it Globally as TypeScript is a 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 Mac OS in Linux also I'm not sure what command will be working for Linux.

After the 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 Typescript Learning ( Name it whatever 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 fire up 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 do is compile your Code available in .ts format file type to Regular JavaScript to ES5 ( which is set by default ).

Now you can check the compiled JavaScript Code in the File Named 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 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 set up the TypeScript and edit the way 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 create a tsconfig.json file and will let you any of the Settings that might be useful in TypeScript and TypeScript will work based on this file only.

So now Open up your tsconfig.json and find out where the 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 in one Directory and TypeScript files in 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 make it rootDir and set its 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 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 just watch every file inside of the SRC directory and convert them to Regular JavaScript if it finds them to be a TypeScript file.

you can also just run tsc which 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 deeply but that's for another Article.

This article was originally written back when I was starting but as a private article, I was afraid of building in Public but now Let's do this.

So my Web App which I am rebuilding is available on justaman045.vercel.app you can visit it now also but it's currently under heavy maintenance and the look and feel will change in about 2 or 3 weeks.

Promotion

Currently, I am also focused on building the Community mentioned below:

  1. Anime Community:- Instagram/otakuanime69

  2. Motivational Theme Page:- Instagram/glorymotivation7

also, I'm currently focused on building my Brand named Otaku Outfits currently it's in the approval stage on Etsy but once it is live I'll be sharing it with you all by making sure to subscribe to my Newsletter from the Newsletter tab.

Also, it'll be helpful if you can just follow this link to Medium and give me a like and follow there too.

Contact

To contact you can join my Discord Server where I intend to keep the community in one place and also serve the community
Discord Link:- https://discord.gg/ZfAKPZvT ( It's brand new and I'm okay if you help me out on setting up this ).

Thanks for Reading
Happy Hacking

TypeScriptJavaScript#codenewbiestipsguide