TypeScript Hello World Tutorial

by

Do you want to learn Typescript from the beginning? Check out this Typescript Hello World program.

TypeScript Hello World

TypeScript, a superset of JavaScript, adds static types to JavaScript. By doing so, it helps catch errors early in the development process and provides a more robust coding experience. This tutorial walks through creating a simple “Hello World” program in TypeScript.

Prerequisites

Before diving into the TypeScript world, ensure you have Node.js installed on your system. Node.js is necessary because TypeScript code is transpiled into JavaScript, which is then run by Node.js.

Step 1: Install TypeScript

First, install TypeScript globally using npm (Node Package Manager). Open your terminal or command prompt and run:

npm install -g typescript

This command installs TypeScript on your system, allowing you to use the TypeScript compiler (tsc) from anywhere in your command line.

Step 2: Initialize Your Project

  • Create a new directory for your TypeScript project:
mkdir ts-hello-world
cd ts-hello-world
  • Initialize a new Node.js project within this directory:
npm init -y

This command creates a package.json file with default values.

Step 3: Create Your TypeScript File

  • In your project directory, create a new file named hello.ts.
  • Open this file in your text editor and add the following TypeScript code:
let message: string = "Hello, World!";
console.log(message);

Here, message is a string variable containing “Hello, World!”, which is logged to the console.

Step 4: Compile TypeScript to JavaScript

To run TypeScript code, you must first compile it to JavaScript. Use the TypeScript compiler for this:

tsc hello.ts

This command generates a hello.js file in the same directory, which is the JavaScript version of your TypeScript file.

Step 5: Run Your Program

Finally, run your compiled JavaScript file with Node.js:

node hello.js

You should see “Hello, World!” printed to your terminal, signifying that your TypeScript program ran successfully.

Typescript Hello World using Visual Studio Code

Visual Studio Code (VS Code) is a popular and powerful editor for web development, including TypeScript. It provides an integrated environment that simplifies the process of coding, compiling, and debugging TypeScript programs. Here’s a step-by-step guide on using VS Code to create a TypeScript “Hello World” program.

Prerequisites

Ensure you have the following installed:

  1. Visual Studio Code: Download and install it from the official website.
  2. Node.js: Required for running JavaScript code generated from TypeScript.
  3. TypeScript: Install it globally using npm (Node Package Manager) with npm install -g typescript.

Step 1: Set Up Your Project

  1. Create a Project Directory: Make a new folder for your project, e.g., ts-hello-world.
  2. Open VS Code: Launch Visual Studio Code.
  3. Open Your Project: In VS Code, go to File > Open Folder and select your ts-hello-world folder.

Step 2: Initialize Your Node.js Project

  1. Open the Integrated Terminal: In VS Code, use the shortcut Ctrl + `` or go to Terminal > New Terminal`.
  2. Initialize Node.js Project: Run npm init -y to create a package.json file with default values.

Step 3: Create Your TypeScript File

  1. Create a New File: Click on the New File icon in the Explorer panel in VS Code and name it hello.ts.
  2. Write TypeScript Code: Enter the following code in hello.ts:
let message: string = "Hello, World!";
console.log(message);

Step 4: Compile TypeScript to JavaScript

  1. Compile from Terminal: Use the built-in terminal in VS Code and run tsc hello.ts. This generates a hello.js file.
  2. Automate Compilation: For a more automated experience, create a tsconfig.json file in your project root with tsc --init, and modify the necessary compiler options. Then, you can simply run tsc without specifying the file.

Step 5: Run Your Program

  1. Run the JavaScript File: In the terminal, execute node hello.js.
  2. Check the Output: You should see “Hello, World!” in the terminal, indicating your program ran successfully.

Conclusion

This is how to write and execute your first TypeScript program. This tutorial provided a beginner-friendly guide to TypeScript, focusing on the fundamental steps to get started. I have also explained how to create a Typescript Hello World program using Visual Studio Code.

>