What is Typescript? Compile typescript code

In this tutorial, we learn what is typescript and how to install the same. Also, understand how to run and compile the typescript program on your machine.

What is Typescript?

Typescript has been designed and developed by Microsoft in the year 2012. It is an open-source language that builds on top of JavaScript you can also call it a superset of JavaScript. Typescript is an object-oriented language that supports classes, interfaces, inheritance, etc. The typescript file has a “.ts” extension.

Note: The latest version of typescript is 4.2.3 at the time I was writing this article.

Typescript extends JavaScript by adding types in it what it means we know JavaScript doesn’t have datatypes means when you declare something it was declared using the “var” keyword which is not strongly typed and may result in exceptions but typescript is strongly typed language.

Compile Typescript

Example –

//JavaScript variable declaration

//Not strongly typed, variable “a” and hold any value not only integer.
var a = 10;

//typescript variable declaration

//Strongly typed, variable “a” only hold a integer value i.e. 10 here.
var a: number = 10;

How to install typescript

There are two steps to install typescript in your machine using npm(Node package manager).  –

  1. Download and Install the latest LTS Node.js from the Node website here is the link

Now go to command prompt run as administrator check for node and npm version using below command

C:/>node -v
C:/>npm -v

how to check npm verison
2.Install the typescript globally using the below command –

//install typescript globally
npm install -g typescript

The above command installed typescript globally as we used “-g” the benefit of installing the typescript globally is that it can be used from any directory you don’t need to install it every time you create a project. If you want to install locally for any project using the below command –

//install dev dependencies
npm install typescript --save-dev

Note: Suppose if have an older version of typescript then you can update the same using the below command –

//upgrade to latest typescript verison
npm install typescript@latest –g

Now your typescript environment is ready for development let create a first hello world project using typescript –

Create first Typescript Project

Here, I show how to create your first typescript project and compile it and use it in the web application.

For this sample, I use Visual studio code, so let’s create one “showmessage.ts” file and write the following code and save it.
Example –

function showmessage(msg:string){
  return "Welcome to " + msg;
}
var message = showmessage("geeks tutorials");
console.log(message);

The above code has a function named “showmessage()” which takes one parameter of string type then we call the function and display the result in the console.

Run and Compile TypeScript Code

To compile the typescript file first open the command prompt or terminal in visual studio code and navigate to the path where you saved the showmessage.ts file.

The tsc “<typescriptfile>” command is used to compile the typescript code. Once complied the typescript code is converted into javascript and one “.js” file is generated i.e showmessage.js is generated in our case.

Example –

//compile typescript code
tsc showmessage.ts

Complie typescript code

Go to the “showmessage.ts” location you will find the showmessage.js file –

Now you can refer to this .js file in the “<script>” tag of your project and use the same. Every time you modify typescript (.ts file) you have to re-compile the code using tsc command.

Compile Typescript Online

The official typescript site provides the online editor to compile typescript online using the typescript online editor. Copy and paste the above code and run the online editor to check the output.

compile typescript online

Conclusion

You have learned what typescript is and how to install the same globally and locally. After that, I show you how to run and compile the typescript code.