Hello World Program in TypeScript
We have already learned how to set up the environment for TypeScript. In this lesson, we will learn how to create our first TypeScript program and compile and run it.
Creating first TypeScript Program
To create a TypeScript program, you can use any code editor such as sublime code, VS code, etc.
In our case, we have used the Visual Studio code, then create a new file and save it with the .ts extension. You can provide the file name of your choice, but the extension must be .ts for the typescript program. Then write the code in that file.
Example: TypeScript Program
In the given example, we have created a basic TypeScript program.
let message = 'Welcome to Studytonight';
console.log(message);
Compiling TypeScript Program
To compile the TypeScript Program, open Command Prompt, and then go to the program file location.
To go for the file directory location, first, write cd command and then we can directly paste the location file location and then press Enter button.
So, now we are in the same folder in which the program file exists.
Now write the compilation command that is tsc filename.ts. So, we have named our file hello.ts, then the compilation command is tsc hello.ts, and then press Enter button.
If there is no error and the program is compiled successfully, then the TypeScript compiler creates a new file with the .js extension having the same code in the typescript file.
To run the TypeScript code, write node filename.ts and then press Enter.
Displaying output on the web browser
Apart from the command prompt, we can also display the output of the TypeScript program on the live server.
To display the output of the TypeScript code on the web browser, we have to first create an HTML file. Here, we have named our HTML file index.html you can provide the name of your choice.
<html>
<head>
<title>TypeScript Program</title>
</head>
<body></body>
</html>
Then embed the JavaScript file within the HTML file using the <script> tag.
<html>
<head>
<title>TypeScript Program</title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html>
To run the given code on the web browser, we have to install the live server plugin.
Installing liver server plugin
To install the live server plugin, click on the extension button within the VS code and search for the live server.
Select the first option and then click on the Install.
After installing the live server, right-click the mouse, and you will get the option "Open with live server" on the dialog box.
Click on the open with live server option, then the live server will open the index.html file on the web browser.
The live server will open the index.html file on the web browser with the URL: http://127.0.0.1:5500/index.html
Output
The output of the following code is below. You can see this in the console tab of your browser.
Conclusion
In this lesson, we have created a basic TypeScript program. Then we have compiled it and run on command prompt. Here, we have also explained how to display the output of the TypeScript command on the live server.
