TypeScript Hello World Program – Step-by-Step Guide

1️⃣ Create a New TypeScript File

First, you need a TypeScript file (.ts). If you haven’t already set up TypeScript, check out our TypeScript Installation and Setup Guide.

🔹 Step 1: Create a Project Folder (If Not Done Already)

If you don’t have a project folder yet, create one:

mkdir my-typescript-project
cd my-typescript-project

🔹 Step 2: Create a TypeScript File

Inside the project folder, create a new folder src and add a file named hello.ts:

mkdir src
cd src
touch hello.ts

Open hello.ts in a code editor (like VS Code) and write the following code:

let message: string = "Hello, World!";
console.log(message);

👉 Explanation:
✔ let message: string = “Hello, World!”; → Declares a variable message of type string.
✔ console.log(message); → Prints the message to the console.

This is your first TypeScript program! 🎉

2️⃣ Compile TypeScript Code to JavaScript

TypeScript does not run directly in browsers or Node.js. You need to compile it into JavaScript first.

🔹 Step 3: Compile TypeScript Code

Run the following command in the terminal (inside your project folder):

tsc src/hello.ts

This command converts hello.ts into hello.js inside the same directory (or the dist folder if configured).

3️⃣ Run the Compiled JavaScript Code

Now, run the JavaScript file using Node.js:

node src/hello.js

✔ Output:

Hello, World!

🎉 Congratulations! Your first TypeScript program is running successfully.

4️⃣ Using tsconfig.json for Better Project Structure

Instead of compiling each .ts file manually, you can configure TypeScript to automatically compile all files.

🔹 Step 4: Initialize a TypeScript Project

Run:

tsc --init

This creates a tsconfig.json file. Modify it to include:

{
  "compilerOptions": {
    "outDir": "./dist",  // Stores compiled JavaScript files in 'dist' folder
    "rootDir": "./src",  // Stores TypeScript files in 'src' folder
    "target": "ES6",  // Converts TypeScript to ES6 JavaScript
    "strict": true  // Enables strict type checking
  }
}

Now, you can compile the entire project by simply running:

tsc

✔ This compiles all .ts files in src/ and saves the JavaScript files in dist/.

👉 Run the compiled file:

node dist/hello.js

🎯 This method keeps your project structured and easy to manage.

5️⃣ Using TypeScript with Live Compilation (Optional)

If you want TypeScript to automatically compile whenever you save changes, use ts-node.

🔹 Step 5: Install ts-node (Optional)

Run:

npm install -g ts-node

Now, you can directly run TypeScript files without compiling:

ts-node src/hello.ts