TypeScript Getting Started with Hello World Example

In this tutorial, let us learn how to build a simple hello world example using typescript. We will show you how to compile it using typescript standalone compiler (tsc) and run it using Node. Before getting started with the hello world application, you must install Typescript compiler, NodeJs and Visual Studio Code. We covered this in the previous tutorial on how to Install Typescript. Also, read Introduction to TypeScript

Typescript Hello World Example

Open the command prompt and create a folder GettingStarted and then cd into it.

Now, Open Visual Studio Code or any text editor. Go to the GettingStarted folder.

Creating Getting Started Folder

You can open the Visual Studio Code just by typing the following command in the GettingStarted folder

code .

Copy the following code and save the file as helloWorld1.ts

The message is a variable of type string. A variable is a storage for the data. “message” is the name of the variable. In the code above, it stores the value “Hello World”, which is a string

We use let(or var) to create variables in typescript. You will learn more about the variable declaration in our next tutorial

console.log() writes the whatever the message passed onto it to the console

Compile/Execute TypeScript Programs

Now, go back to the command prompt or click on View -> Terminal in Visual Studio Code menu, which will open the PowerShell terminal window

Typescript codes are compiled using the Typescript compiler ie. tsc. Run the following command to compile

The tsc will look for the helloWorld1.ts file and compiles and generates the helloWorld1.js file. Open the file and inspect its content

Hello World Compiled To Javascript

Note that, code is almost the same except for the Type definition “string”, which is removed from the javascript file.

Running the Hello World using nodeJs

We will use the node.js to execute it. Run the following in the command window

Compiling Hello World Example

Running TypeScript in the web app

Create the new typescript file hellowWorld2.ts

The only change we have from the above code is we removed console.log() to alert(),

The alert() method displays the message passed onto it in a window, with an ok button. This method works only in the browser, hence we did not use in the previous code.

Compile the helloWorld2 as shown below

The above will generate the helloWorld2.js file. Now you can refer this in your HTML file. Create the index.html with the script tag pointing to the hellowWorld2.js

Open the file using the chrome or any browser, you should be able to see the alert window.

Running in Typescript Playground

You can also run typescript in using the TypeScript Playground. Head over to Typescript Playground

As you type the code, you will see the javascript code is automatically generated in the right-hand side pane.

Open the Developer Console (ctrl-shit-I in chrome) and click on run and see the Hello World appearing in the console window.

Hello World Example in Playground

Compile Error

As we mentioned in the previous article on, the typescript compiler warns us if there are any type mismatches.

For Example, create helloWorld3.ts and add the following code. Here we are assigning a string to a number variable.

Instantly the Visual Studio Code underlines the message in red, indicating the error in the code. Also, when you compile, the compiler will throw the following error.

Typescript will generate the javascript code even if there is a compile error. The helloWorld3.ts shown above contains an error but the helloWorld3.js is still produced. This is intentional. This allows us to export our javascript code to typescript and progressively update it to Typescript.

Summary

Now, we have learned how to create a simple Typescript file. Compile it with the Typescript compiler and run it using the Node & Also using the browser

Leave a Comment

Your email address will not be published.

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

Scroll to Top