Full stack Web Development

TypeScript Setup Environment in our System

ECMAScript-6 came up with the new syntax and the object-oriented concepts that took JavaScript language to the other level but due to some loopholes, ES6 doesn’t work in the production phase as most of the browsers don’t support ES6. 
Due to this, Microsoft has developed and launched an open-source product called “TypeScript” to work on any complex applications using frameworks on top of the JavaScript. TypeScript is an enhanced version of ES6. In short, it is the superset of JavaScript. This converts the TypeScript code to ES5.
In this article, we’re going to learn how to setup the configuration files, run the TypeScript code and compile the TypeScript (.ts file) to JavaScript (.js file). We assume you’ve read enough handbooks to write new TypeScript code.

Compiling TypeScript File to JavaScript File
Before, we dive deep into the core technical concept of conversion. Let us learn how to set-up configuration files and run your first code in the local system.

Step 1 – Set up the Configuration File

While setting up the configuration files, learn the following pre-requisites that must be taken care:

  1. Install Node

This is one of the prerequisites to setup the configuration file. If you haven’t yet installed the node in your machine. Not a problem, click https://nodejs.org/en/ and select for Windows/Mac and Linux to install the respective node engine as shown in the below screen shot.

Once the node is installed, go to the terminal and type the following command to see the current version of the installed node:
node  –version

NPM stands for Node Package Manager. As soon as we install node, npm also gets installed. TypeScript and Angular depend upon features and functionalities provided by a variety of third-party packages. These packages are maintained and installed with the npm.
To check whether the npm version is available with node or not, type the below command:
 
npm –v

The output will show you the current version of npm got installed.
 
2. Install Typescript
Install the TypeScript by typing the below command in the terminal:
npm  install -g typescript
Note: In case of Mac, use sudo to install npm command in the administrator mode.

The above screenshot suggests getting started with the required tools. For example, Text Editor tools to write the best code as per the industry standard.
The command install –g typescript in the terminal will let you install the TypeScript packages in the system root directory.

Step 2 – Choose and Install the best Text Editor

In this step, let us see how to run your code in the local system. For that you have to first select and install the best text editor tool to write the TypeScript code.
There are many good editors available which supports TypeScript code to run and compile easily.
But before installing text editor on your machine, install Sublime text editor to write code in sublime (https://www.sublimetext.com/). There is also an alternative way to use sublime editor by installing plugin to help you import to make the editor feasible for writing TypeScript codes (https://github.com/Microsoft/TypeScript-Sublime-Plugin).
Here are some of the most commonly used text editors for TypeScript code:

Note: The most recommended text editor is Visual Studio Code (Click here to download for Windows OS (https://code.visualstudio.com/).

 
Double-click on VSCodeSetup.exe to launch the setup process. This will only take a minute. Once the Visual Studio code is installed successfully, a success message will be displayed as shown in the below screen shot.

Step 4 – Create a File Folder

Once the Visual Studio code is installed successfully, create a file folder by using the following command in the terminal.
mkdir roots
/*root is my folder name you can use any name of your choice*/

Step 5 – Create a Project File Folder

Create your project file folder inside the root folder by typing in the terminal.
mkdir samplecode

Step 6 – Import Folder to Visual Studio Code

Import the created folder in the root directory to Visual Studio Code. To import, click on open to find the folder directory and then import it to code editor.
 

Step 7 – Create a File test.ts.

Create a TypeScript file test.ts in the sample code folder. Make sure the file extension is .ts. The below screenshot will give you a clear idea of where to create the file.

Step 8 – Write TypeScript Code in test.ts file.
Once the TypeScript file is created, write one sample code inside test.ts file as shown in the below screenshot:

Note: The TypeScript code .ts file be converted to .js file code and then it compiles and runs.”

Step 9 – Transpile the Code – Using tsc command

TSC generates a JavaScript version of the .ts file passed to it. In other words, the TSC produces an equivalent JavaScript source code from the TypeScript file given as an input to it. This process is termed as Transpilation.
However, the compiler rejects any raw JavaScript file passed to it. The compiler deals with only .ts files.
Let us understand how it converts .ts code to .js code. Type the below command in the terminal to transpile the TypeScript code to Java Script code:
tsc  test.ts
where,
test .ts is the user-defined file name.
tsc is nothing but Typescript compiler
Note: Once we type tsc test.ts, we can scroll down to our folder directory and can find an additional file been created as test.js automatically by the tsc compiler. The below screenshot will give you a clear picture of how the tsc compiler automatically creates .js file.

The test.js file will be available inside the created folder in the root directory. This file is auto-compiled code generated by the tsc compiler and will be rendered in the browser console to run.

Step 10 – Create an Object

Let us create an object of our class in our code. TypeScript is an object oriented programming language. To make the syntax simple we use TypeScript language for preparing component. If you are familiar with Oops concept we do have a class and every class  we have an instant which is an object. object will access all the properties of class, the data members and member function of the class.
Below code we have created a simple class test and to create a object we have to use new keyword as well.

Error comes straight away since we haven’t passed any parameter to our object : [ts] Supplied parameters do not match signature of call target.
Constructor test(argument: any): test
Now, let us initialize the object so the constructor can be invoked as shown in the below screenshot.
 

Only test.ts file is updated but test.js file is not updated. Type the command tsc test.ts in the terminal again.

Now test.js file got updated as well.

Step 10 – Run Console

This is the final phase, you should copy the test.js file into browser and run in a console. You can see the alert box as well after running in the console.

 
 
The process of manually compiling the code is tedious to any developer. Therefore, Microsoft has changed TypeScript Manual Compilation to Auto Compilation.
Now, let us understand how to make changes to .ts file so that the same will updated in the .js file automatically without undergoing manual compilation process.

  1. Type the below in the terminal

tsc -w

Where, tsc is a TypeScript compiler and -w means watch all the TypeScript file present inside the sample code project folder. Thus if we do any changes in .ts file then it will do the auto compilation.
Like in every story there is a twist here as well. Yes, we cannot write the command tsc -w directly without creating tsconfig.json in our samplecode folder.
 

When we write the command directly in the terminal, the error will be generated as shown in the below screenshot: 

Therefore, we need to create a file “tsconfig.json” manually in the samplecode project folder.
So, What is tsconfig.json?
Tsconfig.json file in a directory indicates that the directory is the root for the TypeScript project as it specifies the root files and the compiler options required to compile the project. It also specifies the TypeScript project settings such as compiler options and the files that to be included. There are two methods of creating tsconfig.json file,

  1. Creating and adding the file manually
  2. Automatically creating the file using tsc –init command

Creating tsconfig.json file manually

To create the file manually, perform the following steps:

  1. Open the folder where you wish to store source.
  2. Add a new file “tsconfig.json”.

The file IntelliSense will help you along the way.

So, we added tsconfig.json file into our samplecode project folder structure.

 

  1. Automatically creating tsconfig.json using tsc –init command

To generate tsconfig.json file automatically we need to type the below command in the terminal:
tsc  – init

The above screenshot shows that the tsconfig.json file is successfully created. It contains some options for the compiler process. Make sure that, the created file tsconfig.json must be in the root directory.

Since tsconfig.json is added in the root folder now you can type the following command directly in the terminal:
tsc  -w


Now, we can see –w is in watch mode. Any changes in the .ts file then the same will be updated in the .js file automatically without running tsc –w command.


The above example clearly shows you that, changes are automatically updated to js file without manually running our command. The argument got changed from “sachin” to “param”.  So, tsc – w command helps us to watch our ts file and automatically updates the same in the .js file.
Thus it can be concluded as TypeScript is superset of JavaScript and it is being implemented in most of the Angular applications. In order to, run your application in browser we need a transpiler which will convert TypeScript to JavaScript and then it renders.
Attend Online bootcamp now to learn Advanced JavaScript, Bootstrap, and AngularJS  by joining Web Development courses here on Acadgild.
 
 
 
 

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close