TypeScript - Environment Setup/Installation

Type Script History

Install TypeScript

In order to install NodeJs, Go to the official site of nodejs : https://nodejs.org/en/download/ and download and install nodejs  based on your operating system.

verify the nodejs and npm are installed on your machine, run the below command on your command prompt.

C:\type-scriptt>node --version

V10.15.1

 

C:\type-script>npm --version

6.4.1

 

This command shows that  nodejs v10.15.1 and npm 6.4.1 version installed on my machine.

Typescript Installation

Create your project directory/folder C:\type-script manually or using cmd coomand

run below coomand to create a folder/directory

mkdir type-script

Run below command to go created directory 

cb type-script

Type Script Setup

  

Install TypeScript with:

  

        npm i typescript --save-dev
        npm init -y

  Type Script Setup

Create a tsconfig.json file

 tsconfig.json file is used for TypeScript project configuration. The tsconfig.json file should be in the project's root directory. It allows you to configure the TypeScript compiler with different options.

 Note: You can also run the tsc --init to generate a tsconfig.json file with some default options set for you and a bunch of other options commented out

  

        tsc --ini

  Type Script Setup

Configuring the TypeScript compiler

Open the tsconfig.json file and replace all the original contents with below code snippet:

 

  

        {
        "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
        }
        }

Save and close the tsconfig.json file. This configuration file is used by the TypeScript compiler and by any TypeScript code editor.

TypeScript compiles convert/compile the TypeScript code to JavaScript code based on target ES version. The target  key determines the desired JavaScript version. In the above configuration convert the JavaScript code using ES5 standard.

Transpile TypeScript into JavaScript

  1. Open Visual Studio Code
  2. Click on FileMenu then click on Open Folder sub menu 
  3. Select the type-script folder 

 

  Type Script Setup

Create a simple TS file

Open Visual Studio Code on an empty folder(type-script) and create a helloworld.ts file, copy the below code in that file...

let message: string = 'Hello World';

console.log(message);

 

To test that you have the TypeScript compiler tsc installed correctly and a working Hello World program, open a terminal and type tsc helloworld.ts  or tsc hellowworld. You can use the Integrated Terminal (Ctrl+) directly in VS Code.

 You can see the transpiled helloworld.js  JavaScript file in VS Code. Run the node helloworld.js  command in terminal and terminal will print the below message.

  Type Script Setup