Recently, I was introducing a colleague to TypeScript, and the first thing we did was create a simple “Hello World” program.
It’s always best to start with the basics when learning a new programming language.
In this article, I will explain different ways to create and run a “Hello World” program in TypeScript, from setting up your environment to executing your first TypeScript code. So let’s dive in!
What is TypeScript?
TypeScript is a superset of JavaScript that adds static typing to the language. It was developed by Microsoft to address some of the shortcomings of JavaScript, especially when building large-scale applications.
The code you write in TypeScript gets compiled into plain JavaScript, which can run in any browser or JavaScript environment.
Method 1: Setting Up TypeScript and Running a Hello World Program
Before we can write our first TypeScript program, we need to set up our development environment. Here’s how to do it:
Step 1: Install Node.js and npm
First, you need to have Node.js installed on your computer. This will also install npm (Node Package Manager), which we’ll use to install TypeScript.
To check if you have Node.js installed, open your terminal or command prompt and run:
node -v
npm -vIf you see version numbers, you’re all set. If not, download and install Node.js from nodejs.org.
Step 2: Install TypeScript
Now, let’s install TypeScript globally on your machine:
npm install -g typescriptTo verify the installation, run:
tsc --versionYou should see the TypeScript version number.
Step 3: Create Your First TypeScript File
Create a new file named hello.ts and open it in your favorite code editor. Then add the following code:
// hello.ts
console.log("Hello, World!");Step 4: Compile and Run Your TypeScript Code
Now, let’s compile our TypeScript code into JavaScript:
tsc hello.tsThis will create a hello.js file. Now run it using Node.js:
node hello.jsYou should see “Hello, World!” printed in your terminal.
Method 2: Using TypeScript Playground
If you don’t want to set up TypeScript locally, you can use the TypeScript Playground, which is an online editor provided by Microsoft.
Here’s how to use it:
- Go to TypeScript Playground
- Clear any existing code
- Type console.log(“Hello, World!”);
- Click the “Run” button
You’ll see “Hello, World!” in the output panel on the right.
This is a great way to experiment with TypeScript without needing to install any additional software.
Method 3: Creating a TypeScript Project with npm
For a more professional setup, let’s create a proper TypeScript project:
Step 1: Create a New Project Directory
mkdir hello-typescript
cd hello-typescriptStep 2: Initialize a Node.js Project
npm init -yThis creates a package.json file with default settings.
Step 3: Install TypeScript Locally
npm install typescript --save-devStep 4: Create a TypeScript Configuration File
Create a file named tsconfig.json:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"]
}Step 5: Create Your Source Directory and TypeScript File
mkdir srcCreate a file named src/index.ts:
// src/index.ts
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet("World"));Step 6: Add npm Scripts
Update your package.json to include these scripts:
"scripts": {
"build": "tsc",
"start": "node dist/index.js"
}Step 7: Build and Run Your Project
npm run build
npm startYou should see “Hello, World!” in your terminal.
Method 4: Using TypeScript with VS Code
Visual Studio Code has excellent TypeScript support out of the box. Here’s how to use it:
- Install VS Code from code.visualstudio.com
- Create a new file named hello.ts
- Add the code: console.log(“Hello, World!”);
- Open the integrated terminal (Ctrl+` or View > Terminal)
- Compile and run the code:
tsc hello.ts
node hello.jsVS Code also supports TypeScript compilation on save. To enable this:
- Create a tsconfig.json file
- Add the following configuration:
{
"compilerOptions": {
"target": "es6",
"outDir": "./dist",
"watch": true
}
}- Run tsc -w in the terminal to start the watch mode
Now, every time you save your TypeScript file, it will automatically be compiled to JavaScript.
Going Beyond Hello World: Adding Types
Let’s enhance our Hello World program by adding some TypeScript-specific features:
// hello_enhanced.ts
// Defining a typed function
function greet(name: string, age?: number): string {
if (age !== undefined) {
return `Hello, ${name}! You are ${age} years old.`;
}
return `Hello, ${name}!`;
}
// Using an interface
interface Person {
firstName: string;
lastName: string;
age?: number;
}
// Using the interface
const user: Person = {
firstName: "John",
lastName: "Doe",
age: 30
};
// String interpolation with types
console.log(greet(`${user.firstName} ${user.lastName}`, user.age));
// Using an array with type
const cities: string[] = ["New York", "Los Angeles", "Chicago", "Houston"];
console.log(`Popular cities in the USA: ${cities.join(", ")}`);Compile and run this code:
tsc hello_enhanced.ts
node hello_enhanced.jsYou’ll see more advanced output using TypeScript’s type system.
Conclusion
I hope you found this article helpful. TypeScript is a powerful language that builds on JavaScript’s flexibility while adding the safety of static types. The “Hello World” program is just the beginning.
From here, you can explore interfaces, generics, decorators, and many other features that make TypeScript great for building robust applications.
Other TypeScript articles you may also like:
- Is TypeScript Frontend or Backend?
- Differences Between TypeScript and JavaScript
- Differences Between Type and Interface in TypeScript
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
