TypeScript Setup

Your First TypeScript Program

The classic “Hello World” program is the traditional first step when learning a new programming language. In TypeScript, it’s simple and straightforward!

Basic Hello World

Here’s the simplest TypeScript Hello World program:

console.log("Hello, World!");

When you run this code, it will output:

Hello, World!

Hello World with Types

TypeScript is all about adding types to JavaScript. Here’s a typed version:

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

In this example:

• message is a variable
• : string specifies that the variable must be a string type
• "Hello, World!" is the string value assigned to the variable

Hello World Function

Let’s create a function that returns a greeting:

function sayHello(name: string): string {
  return `Hello, ${name}!`;
}
 
console.log(sayHello("World"));
console.log(sayHello("TypeScript"));

Output:

Hello, World!
Hello, TypeScript!

Function Breakdown:

• function sayHello - declares a function named sayHello
• (name: string) - parameter name must be a string
• : string - the function returns a string
• Template literals (backticks) are used for string interpolation

Hello World with Interface

TypeScript interfaces define the shape of objects:

interface Greeting {
  message: string;
  recipient: string;
}
 
function createGreeting(name: string): Greeting {
  return {
    message: "Hello",
    recipient: name
  };
}
 
const greeting = createGreeting("World");
console.log(`${greeting.message}, ${greeting.recipient}!`);

Output:

Hello, World!

Hello World Class

Using object-oriented programming with classes:

class Greeter {
  private greeting: string;
 
  constructor(message: string) {
    this.greeting = message;
  }
 
  greet(name: string): string {
    return `${this.greeting}, ${name}!`;
  }
}
 
const greeter = new Greeter("Hello");
console.log(greeter.greet("World"));
console.log(greeter.greet("TypeScript"));

Output:

Hello, World!
Hello, TypeScript!

Class Breakdown:

• class Greeter - defines a class
• private greeting: string - private property with string type
• constructor - initializes the greeting when creating a new instance
• greet method - takes a name and returns a formatted greeting

Running TypeScript Code

To run TypeScript code, you need to:

1. Install TypeScript (if not already installed):

npm install -g typescript

2. Create a file (e.g., hello.ts):

console.log("Hello, World!");

3. Compile TypeScript to JavaScript:

tsc hello.ts

This creates hello.js

4. Run the JavaScript file:

node hello.js

Or use ts-node for direct execution:

npm install -g ts-node
ts-node hello.ts

Try It Yourself

Experiment with these variations:

// 1. Personalized greeting
const userName: string = "Alice";
console.log(`Hello, ${userName}!`);
 
// 2. Multiple languages
function greet(name: string, language: string): string {
  const greetings: { [key: string]: string } = {
    english: "Hello",
    spanish: "Hola",
    french: "Bonjour",
    german: "Guten Tag"
  };
 
  return `${greetings[language]}, ${name}!`;
}
 
console.log(greet("World", "english"));
console.log(greet("Mundo", "spanish"));
console.log(greet("Monde", "french"));
 
// 3. Time-based greeting
function getTimeBasedGreeting(): string {
  const hour = new Date().getHours();
 
  if (hour < 12) {
    return "Good morning";
  } else if (hour < 18) {
    return "Good afternoon";
  } else {
    return "Good evening";
  }
}
 
console.log(`${getTimeBasedGreeting()}, World!`);

Key Takeaways

1. TypeScript adds static typing to JavaScript
2. Type annotations use the : type syntax
3. TypeScript code must be compiled to JavaScript before running
4. You can use all JavaScript features plus TypeScript’s type system
5. TypeScript helps catch errors at compile time, not runtime

What’s Next?

Now that you’ve written your first TypeScript program, learn about:

• Basic Types - Understanding TypeScript’s type system
• Functions - Working with typed functions
• Interfaces - Defining object shapes

Practice Exercise: Create a program that greets a user by name and tells them the current date and time!