In this tutorial, you’ll learn how to develop the Hello World program in TypeScript.
TypeScript Hello World program in node.js
Step 1: Create a new folder to store the code, e.g., helloworld.
Step 2: Launch VS Code and open that folder which you created.
Step 3: Create a new TypeScript file called helloworld.ts. The extension of a TypeScript file is .ts.
Step 4: Type the following source code in the helloworld.ts file:
let msg: string = 'Hello World !!';
console.log(msg);
Step 5: Launch a new terminal from the menu Terminal -> New Terminal and type the following command tsc helloworld.ts on the terminal to compile the helloworld.ts file
If everything is fine, you’ll see a new file called helloworld.js is generated by the TypeScript compiler:
To run the helloworld.js file in node.js, you use the following command:
node helloworld.js
If you installed the ts-node module mentioned in the setting up TypeScript development environment, you can use just one command to compile the TypeScript file and execute the output file in one shot:
ts-node helloworld.js
TypeScript Hello World program in Web Browsers
You follow these steps to create a webpage that shows the Hello World !! message on web browsers.
Step 1: Change the helloworld.ts code to the following:
// 1. Create 'msg' variable and assign the value.
let msg: string = 'Hello World !!';
// 2. Create heading 'h3' element.
let element = document.createElement('h3');
element.textContent = msg;
// 3. Append to document's body
document.body.appendChild(element);
Step 2: Compile the helloworld.ts file
tsc helloworld.ts
Step 3: Create a new file called index.html and include the helloworld.js as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TypeScript: Hello World !!</title>
</head>
<body>
<script src="helloworld.js"></script>
</body>
</html>
Step 4: Open the Live Server from the VS code by right-mouse click the index.html and select the Open with Live Server option
The Live Server will open the index.html with the following message
To make the changes, you need to edit the helloworld.ts file. For example:
// 1. Create 'msg' variable and assign the value.
let msg: string = 'Hello, Hi Techpoints';
// 2. Create heading 'h3' element.
let element = document.createElement('h3');
element.textContent = msg;
// 3. Append to document's body
document.body.appendChild(element);
And compile the helloworld.ts file:
tsc helloworld.ts
The TypeScript compiler will generate a new helloworld.js file, and the Live Server will automatically reload it on the web browser.
Note that the helloworld.js is the output file of the helloworld.ts file, therefore, you should never directly change the code in this file, or you’ll lose the changes once you recompile the helloworld.ts file.
In this tutorial, you have learned how to create the first program in TypeScript called Hello World !! that works on node.js and web browsers.
