Installing Node.js And Typescript And Creating First Typescript Program And Component In Angular

Introduction

 

In this article, we are going to discuss about the steps which we need  to follow for the installation of Node.js and typescript. Also we are going to create, compile and execute our first typescript program. Along with this we are going to create the component using Angular CLI and explore the files which are created. 

 

Steps

• Go to official site of TypeScript ( http://www.typescriptlang.org/ )and follow steps mentioned there to download TypeScript.
• As mentioned in the official site, you need to install Node.js.
• Go to official site of Node.js ( https://nodejs.org/en/) and follow the steps mentioned there to download Node.js

Post installation checking

 

Open a Node.js command prompt and check whether node and npm is installed in your machine by using "node -v " and "npm -v" commands. 

 

NPM (Node Package Manager) is a command line tool which comes along with Node.js installation with which we can download node modules. TypeScript is also such a node module which can be installed using npm.

 

As you have already installed Node.js, let's get started with the installation of Typescript package using npm 

• Open any console window (cmd.exe)
• Enter command - npm install -g typescript - This will download the latest version from the server, extract it and install on your system. A progress indicator will be shown, marking the current progress of the installation. Below is the final output screenshot,

• Once you are done with the installation, type tsc in the command prompt and hit Enter. This will list the TypeScript Compiler Usages on the console window. 
• The latest typescript module will get downloaded under folder C:\Users\username\AppData\Roaming\npm\node_modules\typescript as shown below.

• In the same command prompt check for TypeScript installation as below,

 

We can configure TypeScript with different IDEs. Here are a few links for IDE configuration for TypeScript:

• Visual Studio code
• Eclipse IDE
• Visual Studio 2015

Now we are going to create our first typescript program named - "HiTS.ts"

 

Demosteps

• Open Visual studio 2017, Go to File - New - File - TypeScript File- Open
• Save the file to your system by pressing ctrl+S with the name "HiTS.ts"
• Now add below line of code in the HiTS.ts file,
  

  console.log('Hi welcome to TypeScript');

• Save the file again by pressing ctrl + S
• Now open the command prompt (cmd.exe)
• Navigate to the folder path where you saved your "HiTS.ts" file.
• To compile the project enter command tsc HiTS.ts in the command prompt.
• You can observe that after compilation of the TypeScript file, the corresponding JavaScript file gets generated. Below are the screenshots for before and after comiplation of typescript program.

Before Compilation

 

After Compilation

 

• To run the generated JavaScript file, use node command from the command line or include it in a html page using the script tag and render it in the browser.
• To run it in the command prompt, execute below commandnode HiTS.js
  

  node HiTS.js

This will show you the required output of your program on the command prompt .

 

Now, we are going to see how to create the component using Angular CLI and exploring the files which are created. 

 

Demo steps

 

Step 1

 

In the same "MyApplication" application created earlier, create a new component called hi using the following CLI command

ng generate component Hi

Step 2

 

This command will create a new folder with name hello with the files placed inside it.

 

Step 3

 

Open hi.component.ts file and create a property called Name of type string and initialize it to "XYZ" as shown below in Line number 9,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hi',
  templateUrl: './hi.component.html',
  styleUrls: ['./hi.component.css']
})
export class HiComponent implements OnInit {
  Name : string = "XYZ";
  constructor() { }

  ngOnInit(): void {
  }

}

Step 4

 

Open hi.component.html and display the Name as shown below in Line 2

<p>hi {{XYZ}}</p>

Step 5

 

Open hi.component.css and add the following styles for paragraph element

p{
    color : red;
    font-size:18px;
}

Step 6

 

Open app.component.html and add below line of code,

<router-outlet>
  <app-hi></app-hi>
</router-outlet>

Now, observe index.html page. Inside this page we have below line of in built code,

<body>
  <app-root></app-root>
</body>

The <route-outlet> </route-outlet> tags are getting called internaly inside the <app-root></app-root>

 

Step 7

 

Now run the application by giving the following command

ng serve --open

You will get to see output screen on browser.

 

Summary

 

In this article, we discussed about the steps which we need  to follow for the installation of Node.js and typescript. Also we have created, compiled and executed our first typescript program. We have created the component using Angular CLI and explored the files which are created. Also, we have created and executed "hi" component in the application. Hope you like the article. Happy Reading  Cheers