Home TypeScript How to install TypeScript and Write TypeScript Program

How to install TypeScript and Write TypeScript Program

-

Introduction

In this tutorial I am going to give you details on you can install typescript and write your first typescript program.

So keep in mind in this tutorial we are not going to work with Angular or React in this section we just going to purely focus on typescript so that you will get more sense of writing typescript.

Read – What is TypeScript, Advantages of Using TypeScript

Install TypeScript

First we needs to install TypeScript globally on your machine, so open you terminal or command prompt if you are on windows and execute following command to install TypeScript:

If you are on Mac you need to add sudo at the front of the above command.

Installing TypeScript Globally on Mac, Linux or Windows
Installing TypeScript Globally on Mac, Linux or Windows

So the above command will install the latest version of typescript on your machine as you can see in my case it is 3.5.3 at time of writing this tutorial.

You can also type following command to checkout current installed version of typescript:

Where tsc stands for TypeScript Compiler

Simple TypeScript Program

So now I will show you how can write very basic simple TypeScript program and compile it using typescript compiler and run using Node.

Okay so go ahead and create new folder for new typescript program you can call it anything you want and open that folder into your code editor.

Create new file inside that folder called main.ts and write following program to print message on console.

The following code is all plain javascript code, I just want to show you that all this javascript code also valid typescript code.

main.ts:

So what we are doing here is just defining a very simple function called log_message() that takes a message parameter and then we simply log that message on the console using console.log

Next we have defined global a variable called message and assigned sting to that variable and we simply passing message variable as argument to log_message() and finally calling log_message() function.

Compile TypeScript Code to Javascript

As you know in terms of running typescript code on browser first we need to transpile typescript code to javascript in simple words we needs to compile this code javascript.

So open up terminal and execute following command from your typescript program folder:

So the above command is basically using Typescript compile and compiling that file javascript.

Compiling TypeScript to JavaScript
Compiling TypeScript to JavaScript

Next if you look at the files into program folder you can see that we have two files main.ts and main.js.

So this Transpulation of Compilation step whenever your building Angular or React app happens under the hood, you don’t have to manually call the TypeScript Compiler

Alright now let’s open and see what exactly our main.js files has:

main.js:

So it’s exactly the same code that we wrote but now it’s in Javascript file so it’s clear that All Javascript code is also valid TypeScript code.

Execute JavaScript code Using node

So we can execute our javascript code using node, so go back to the terminal and execute the following command:

Executing-JavaScript-code-using-Node
Executing-JavaScript-code-using-Node

You will see that the “Hello TypeScript” message output on to the terminal.

Conclusion

So to conclude what you learn from this tutorial is that how you can install typescript on your macing, create your typescript programme and compile it to Javascript code.

I know this very basic step but it is important to understand the core concept so that in the future while learning the details features you know have better sense.

What’s Next?

Next you can learn on how to declare variable in type script here – How to Declare Variables in TypeScript?

The reason of giving above tutorial recommendation is we have complete tutorial series on learning typescript, that’s why I want you know and learn typescript fundamentals it is going to help you while developing application with Angular or React.

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.
avatar

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

  Subscribe  
Notify of

Tutorials You May Like!

- Advertisement -