🌟 Your First TypeScript Program: Hello World and Beyond

🎯 Introduction

Welcome to your first TypeScript adventure! 🎉 Today, we’re going beyond “Hello World” to build real, interactive programs that showcase TypeScript’s power.

You’ll discover how to write, compile, and run TypeScript programs while learning essential concepts along the way. We’ll start simple and gradually add features, so by the end, you’ll have created several mini-programs you can be proud of!

Ready to write some TypeScript? Let’s make something awesome! 🚀

📚 Understanding TypeScript Programs

🤔 What Makes a TypeScript Program?

A TypeScript program is like a recipe 📖 with precise instructions. Unlike JavaScript’s “add ingredients to taste” approach, TypeScript wants you to specify exactly what goes in - making your recipes (programs) more reliable!

Every TypeScript program consists of:

✨ Type annotations (the secret sauce)
🚀 Modern JavaScript features
🛡️ Compile-time safety checks
📝 Clear, self-documenting code

💡 The TypeScript Workflow

Here’s how TypeScript programs come to life:

Write 📝: Create .ts files with TypeScript code
Compile 🛠️: TypeScript compiler (tsc) converts to JavaScript
Run 🚀: Execute the generated JavaScript with Node.js or browser
Debug 🐛: Use source maps to debug original TypeScript

🔧 Your First Program: Hello TypeScript!

📝 Step 1: Create Your First File

Create a new file called hello.ts:

// 👋 hello.ts - Your first TypeScript program!

// 🎯 A simple greeting function with types
function greet(name: string, language: string = "TypeScript"): string {
  return `Hello, ${name}! Welcome to ${language}! 🎉`;
}

// 🚀 Using our function
const userName: string = "Developer";
const greeting: string = greet(userName);

console.log(greeting);
console.log("🌟 Your TypeScript journey begins now!");

// 💡 Let's add some interactivity
const currentTime: Date = new Date();
const hour: number = currentTime.getHours();

// 🎨 Time-based greetings with emojis!
let timeGreeting: string;
let emoji: string;

if (hour < 12) {
  timeGreeting = "Good morning";
  emoji = "🌅";
} else if (hour < 18) {
  timeGreeting = "Good afternoon";
  emoji = "☀️";
} else {
  timeGreeting = "Good evening";
  emoji = "🌙";
}

console.log(`${emoji} ${timeGreeting}, ${userName}!`);

🎯 Step 2: Compile and Run

# 🛠️ Compile TypeScript to JavaScript
tsc hello.ts

# 🎉 This creates hello.js
# 🚀 Run the program
node hello.js

Output:

Hello, Developer! Welcome to TypeScript! 🎉
🌟 Your TypeScript journey begins now!
🌅 Good morning, Developer!

💡 Practical Examples

🛒 Example 1: Interactive Shopping List

Let’s build something more interactive:

// 📁 shopping-list.ts

// 🛍️ Define our shopping item structure
interface ShoppingItem {
  id: number;
  name: string;
  quantity: number;
  purchased: boolean;
  emoji: string;
}

// 🛒 Shopping list manager class
class ShoppingList {
  private items: ShoppingItem[] = [];
  private nextId: number = 1;
  
  // ➕ Add item to list
  addItem(name: string, quantity: number = 1, emoji: string = "📦"): void {
    const newItem: ShoppingItem = {
      id: this.nextId++,
      name,
      quantity,
      purchased: false,
      emoji
    };
    
    this.items.push(newItem);
    console.log(`✅ Added ${emoji} ${name} (×${quantity}) to your list!`);
  }
  
  // 🛍️ Mark item as purchased
  purchaseItem(id: number): void {
    const item = this.items.find(i => i.id === id);
    if (item && !item.purchased) {
      item.purchased = true;
      console.log(`🎉 Purchased ${item.emoji} ${item.name}!`);
    }
  }
  
  // 📋 Display the list
  displayList(): void {
    console.log("\n🛒 Your Shopping List:");
    console.log("═══════════════════════");
    
    if (this.items.length === 0) {
      console.log("  📝 Your list is empty!");
      return;
    }
    
    this.items.forEach(item => {
      const status = item.purchased ? "✅" : "⏳";
      const strikethrough = item.purchased ? "~~" : "";
      console.log(`  ${status} ${item.emoji} ${strikethrough}${item.name}${strikethrough} (×${item.quantity})`);
    });
    
    // 📊 Statistics
    const purchased = this.items.filter(i => i.purchased).length;
    const total = this.items.length;
    const percentage = total > 0 ? Math.round((purchased / total) * 100) : 0;
    
    console.log("═══════════════════════");
    console.log(`📊 Progress: ${purchased}/${total} items (${percentage}%)`);
  }
}

// 🎮 Let's use our shopping list!
console.log("🌟 Welcome to TypeScript Shopping List! 🛒\n");

const myList = new ShoppingList();

// 🛍️ Add some items
myList.addItem("TypeScript Book", 1, "📚");
myList.addItem("Coffee", 3, "☕");
myList.addItem("Laptop Sticker", 5, "💻");
myList.addItem("Energy Drink", 2, "⚡");

// 📋 Show initial list
myList.displayList();

// 🛍️ Purchase some items
console.log("\n🛍️ Shopping time!");
myList.purchaseItem(1);
myList.purchaseItem(2);

// 📋 Show updated list
myList.displayList();

🎮 Example 2: Number Guessing Game

Let’s create an interactive game:

// 📁 guess-game.ts

// 🎯 Game configuration interface
interface GameConfig {
  minNumber: number;
  maxNumber: number;
  maxAttempts: number;
  difficulty: "easy" | "medium" | "hard";
}

// 🎮 Game statistics
interface GameStats {
  gamesPlayed: number;
  gamesWon: number;
  totalAttempts: number;
  bestScore: number;
}

// 🎲 Number guessing game class
class NumberGuessingGame {
  private secretNumber: number = 0;
  private attempts: number = 0;
  private config: GameConfig;
  private stats: GameStats = {
    gamesPlayed: 0,
    gamesWon: 0,
    totalAttempts: 0,
    bestScore: Infinity
  };
  
  constructor(difficulty: "easy" | "medium" | "hard" = "medium") {
    this.config = this.getDifficultyConfig(difficulty);
    console.log(`🎮 Game created in ${difficulty} mode!`);
  }
  
  // 🎯 Get difficulty configuration
  private getDifficultyConfig(difficulty: string): GameConfig {
    const configs: Record<string, GameConfig> = {
      easy: { minNumber: 1, maxNumber: 10, maxAttempts: 5, difficulty: "easy" },
      medium: { minNumber: 1, maxNumber: 50, maxAttempts: 7, difficulty: "medium" },
      hard: { minNumber: 1, maxNumber: 100, maxAttempts: 10, difficulty: "hard" }
    };
    
    return configs[difficulty] || configs.medium;
  }
  
  // 🎲 Start a new game
  startNewGame(): void {
    this.secretNumber = Math.floor(Math.random() * 
      (this.config.maxNumber - this.config.minNumber + 1)) + this.config.minNumber;
    this.attempts = 0;
    this.stats.gamesPlayed++;
    
    console.log("\n🌟 New Game Started!");
    console.log(`🎯 I'm thinking of a number between ${this.config.minNumber} and ${this.config.maxNumber}`);
    console.log(`💡 You have ${this.config.maxAttempts} attempts. Good luck! 🍀`);
  }
  
  // 🤔 Make a guess
  makeGuess(guess: number): boolean {
    this.attempts++;
    this.stats.totalAttempts++;
    
    if (guess === this.secretNumber) {
      console.log(`\n🎉 CORRECT! You got it in ${this.attempts} attempts!`);
      this.stats.gamesWon++;
      
      if (this.attempts < this.stats.bestScore) {
        this.stats.bestScore = this.attempts;
        console.log(`🏆 NEW BEST SCORE: ${this.attempts} attempts!`);
      }
      
      this.showStats();
      return true;
    }
    
    const remainingAttempts = this.config.maxAttempts - this.attempts;
    
    if (remainingAttempts === 0) {
      console.log(`\n😢 Game Over! The number was ${this.secretNumber}`);
      this.showStats();
      return true;
    }
    
    // 🎯 Give hints
    const difference = Math.abs(guess - this.secretNumber);
    let hint: string;
    let emoji: string;
    
    if (guess < this.secretNumber) {
      hint = "Too low!";
      emoji = "📉";
    } else {
      hint = "Too high!";
      emoji = "📈";
    }
    
    // 🔥 Temperature hints
    let temperature: string;
    if (difference <= 2) {
      temperature = "🔥 You're burning hot!";
    } else if (difference <= 5) {
      temperature = "♨️ Getting warmer!";
    } else if (difference <= 10) {
      temperature = "🌡️ Warm...";
    } else {
      temperature = "❄️ Cold!";
    }
    
    console.log(`${emoji} ${hint} ${temperature}`);
    console.log(`💫 ${remainingAttempts} attempts remaining`);
    
    return false;
  }
  
  // 📊 Show game statistics
  private showStats(): void {
    const winRate = this.stats.gamesPlayed > 0 
      ? Math.round((this.stats.gamesWon / this.stats.gamesPlayed) * 100) 
      : 0;
    
    console.log("\n📊 Your Statistics:");
    console.log(`  🎮 Games Played: ${this.stats.gamesPlayed}`);
    console.log(`  🏆 Games Won: ${this.stats.gamesWon}`);
    console.log(`  📈 Win Rate: ${winRate}%`);
    console.log(`  🎯 Best Score: ${this.stats.bestScore === Infinity ? "N/A" : this.stats.bestScore} attempts`);
  }
}

// 🎮 Demo the game
console.log("🎲 Welcome to TypeScript Number Guessing Game!\n");

const game = new NumberGuessingGame("medium");
game.startNewGame();

// 🎯 Simulate some guesses
console.log("\n🤔 Making guesses...");
game.makeGuess(25);
game.makeGuess(35);
game.makeGuess(30);
game.makeGuess(32);

🚀 Advanced Concepts

🧙‍♂️ Adding Type Safety to User Input

Here’s how to handle user input safely:

// 📁 user-input.ts

// 🎯 Input validation with types
interface ValidationResult {
  isValid: boolean;
  value?: any;
  error?: string;
}

// 🛡️ Input validator class
class InputValidator {
  // 🔢 Validate number input
  static validateNumber(input: string, min?: number, max?: number): ValidationResult {
    const num = parseFloat(input);
    
    if (isNaN(num)) {
      return { isValid: false, error: "❌ Please enter a valid number!" };
    }
    
    if (min !== undefined && num < min) {
      return { isValid: false, error: `❌ Number must be at least ${min}` };
    }
    
    if (max !== undefined && num > max) {
      return { isValid: false, error: `❌ Number must be at most ${max}` };
    }
    
    return { isValid: true, value: num };
  }
  
  // 📝 Validate string input
  static validateString(input: string, minLength?: number, maxLength?: number): ValidationResult {
    const trimmed = input.trim();
    
    if (!trimmed) {
      return { isValid: false, error: "❌ Input cannot be empty!" };
    }
    
    if (minLength && trimmed.length < minLength) {
      return { isValid: false, error: `❌ Must be at least ${minLength} characters` };
    }
    
    if (maxLength && trimmed.length > maxLength) {
      return { isValid: false, error: `❌ Must be at most ${maxLength} characters` };
    }
    
    return { isValid: true, value: trimmed };
  }
  
  // 📧 Validate email
  static validateEmail(input: string): ValidationResult {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (!emailRegex.test(input)) {
      return { isValid: false, error: "❌ Please enter a valid email!" };
    }
    
    return { isValid: true, value: input.toLowerCase() };
  }
}

// 🎮 Demo input validation
console.log("🛡️ TypeScript Input Validation Demo\n");

// Test cases
const testInputs = [
  { type: "number", value: "42", validator: () => InputValidator.validateNumber("42", 0, 100) },
  { type: "number", value: "abc", validator: () => InputValidator.validateNumber("abc") },
  { type: "string", value: "TypeScript", validator: () => InputValidator.validateString("TypeScript", 5, 20) },
  { type: "email", value: "[email protected]", validator: () => InputValidator.validateEmail("[email protected]") },
  { type: "email", value: "invalid-email", validator: () => InputValidator.validateEmail("invalid-email") }
];

testInputs.forEach(test => {
  const result = test.validator();
  console.log(`Testing ${test.type}: "${test.value}"`);
  if (result.isValid) {
    console.log(`  ✅ Valid! Value: ${result.value}`);
  } else {
    console.log(`  ${result.error}`);
  }
});

🏗️ Building a Complete CLI Program

// 📁 todo-cli.ts

// 🎯 A complete command-line todo app
interface Todo {
  id: number;
  text: string;
  completed: boolean;
  priority: "low" | "medium" | "high";
  createdAt: Date;
  emoji: string;
}

interface Command {
  name: string;
  description: string;
  emoji: string;
  execute: (args: string[]) => void;
}

class TodoCLI {
  private todos: Todo[] = [];
  private nextId: number = 1;
  private commands: Map<string, Command> = new Map();
  
  constructor() {
    this.setupCommands();
    this.showWelcome();
  }
  
  // 🛠️ Setup available commands
  private setupCommands(): void {
    const commands: Command[] = [
      {
        name: "add",
        description: "Add a new todo",
        emoji: "➕",
        execute: (args) => this.addTodo(args.join(" "))
      },
      {
        name: "list",
        description: "List all todos",
        emoji: "📋",
        execute: () => this.listTodos()
      },
      {
        name: "complete",
        description: "Mark todo as complete",
        emoji: "✅",
        execute: (args) => this.completeTodo(parseInt(args[0]))
      },
      {
        name: "help",
        description: "Show help",
        emoji: "❓",
        execute: () => this.showHelp()
      }
    ];
    
    commands.forEach(cmd => this.commands.set(cmd.name, cmd));
  }
  
  // 🎉 Show welcome message
  private showWelcome(): void {
    console.log("🎯 Welcome to TypeScript Todo CLI!");
    console.log("📝 Manage your tasks with style!\n");
    this.showHelp();
  }
  
  // ❓ Show help
  private showHelp(): void {
    console.log("📚 Available Commands:");
    this.commands.forEach(cmd => {
      console.log(`  ${cmd.emoji} ${cmd.name.padEnd(10)} - ${cmd.description}`);
    });
    console.log("\n💡 Example: add Learn TypeScript");
  }
  
  // ➕ Add todo
  private addTodo(text: string): void {
    if (!text) {
      console.log("❌ Please provide todo text!");
      return;
    }
    
    const todo: Todo = {
      id: this.nextId++,
      text,
      completed: false,
      priority: "medium",
      createdAt: new Date(),
      emoji: "📝"
    };
    
    this.todos.push(todo);
    console.log(`✅ Added: ${todo.emoji} ${todo.text}`);
  }
  
  // 📋 List todos
  private listTodos(): void {
    if (this.todos.length === 0) {
      console.log("📭 No todos yet! Add one with 'add <text>'");
      return;
    }
    
    console.log("\n📋 Your Todos:");
    this.todos.forEach(todo => {
      const status = todo.completed ? "✅" : "⏳";
      console.log(`  ${status} [${todo.id}] ${todo.text}`);
    });
  }
  
  // ✅ Complete todo
  private completeTodo(id: number): void {
    const todo = this.todos.find(t => t.id === id);
    if (!todo) {
      console.log("❌ Todo not found!");
      return;
    }
    
    todo.completed = true;
    console.log(`✅ Completed: ${todo.text}`);
  }
}

// 🚀 Run the CLI
const cli = new TodoCLI();

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Forgetting to Compile

# ❌ Wrong - Trying to run TypeScript directly
node my-program.ts
# Error: Unexpected token ':'

# ✅ Correct - Compile first
tsc my-program.ts
node my-program.js

# 🚀 Or use ts-node for development
npx ts-node my-program.ts

🤯 Pitfall 2: Type Errors in Simple Programs

// ❌ Common beginner mistake
let count = 0;
count = "zero"; // Error: Type 'string' is not assignable to type 'number'

// ✅ Solution 1: Keep consistent types
let count = 0;
count = 1; // Good!

// ✅ Solution 2: Use union types if needed
let count: number | string = 0;
count = "zero"; // Now it works!

😵 Pitfall 3: Missing Return Types

// ❌ Implicit any return type
function calculate(a: number, b: number) {
  return a + b; // TypeScript infers number, but it's better to be explicit
}

// ✅ Explicit return type
function calculate(a: number, b: number): number {
  return a + b;
}

🛠️ Best Practices

🎯 Always specify types: Even when TypeScript can infer
📝 Use meaningful variable names: userName not un
🛡️ Enable strict mode: Maximum type safety
🎨 Organize with interfaces: Define shapes of your data
✨ Keep it simple: Start basic, add complexity gradually

🧪 Hands-On Exercise

🎯 Challenge: Build a Temperature Converter

Create a TypeScript program that:

📋 Requirements:

✅ Converts between Celsius, Fahrenheit, and Kelvin
🏷️ Uses proper types for temperature values
👤 Validates input (no temperatures below absolute zero)
📊 Tracks conversion history
🎨 Shows results with weather-appropriate emojis

🚀 Bonus Features:

Add “feels like” descriptions
Support batch conversions
Export results to formatted text

💡 Solution

🔍 Click to see solution

// 🌡️ Temperature converter solution
type TemperatureUnit = "C" | "F" | "K";

interface Temperature {
  value: number;
  unit: TemperatureUnit;
}

interface ConversionRecord {
  from: Temperature;
  to: Temperature;
  timestamp: Date;
}

class TemperatureConverter {
  private history: ConversionRecord[] = [];
  
  // 🔄 Convert temperature
  convert(value: number, fromUnit: TemperatureUnit, toUnit: TemperatureUnit): number {
    // First convert to Celsius
    let celsius: number;
    
    switch (fromUnit) {
      case "C":
        celsius = value;
        break;
      case "F":
        celsius = (value - 32) * 5/9;
        break;
      case "K":
        celsius = value - 273.15;
        break;
    }
    
    // Validate (can't go below absolute zero)
    if (celsius < -273.15) {
      throw new Error("❌ Temperature below absolute zero!");
    }
    
    // Convert from Celsius to target unit
    let result: number;
    
    switch (toUnit) {
      case "C":
        result = celsius;
        break;
      case "F":
        result = celsius * 9/5 + 32;
        break;
      case "K":
        result = celsius + 273.15;
        break;
    }
    
    // Record conversion
    this.history.push({
      from: { value, unit: fromUnit },
      to: { value: result, unit: toUnit },
      timestamp: new Date()
    });
    
    return result;
  }
  
  // 🌡️ Get weather emoji based on Celsius
  private getWeatherEmoji(celsius: number): string {
    if (celsius < -10) return "🥶";
    if (celsius < 0) return "❄️";
    if (celsius < 10) return "🧊";
    if (celsius < 20) return "🌤️";
    if (celsius < 30) return "☀️";
    if (celsius < 40) return "🔥";
    return "🌋";
  }
  
  // 📊 Display conversion with emoji
  displayConversion(value: number, fromUnit: TemperatureUnit, toUnit: TemperatureUnit): void {
    try {
      const result = this.convert(value, fromUnit, toUnit);
      const celsiusValue = fromUnit === "C" ? value : this.convert(value, fromUnit, "C");
      const emoji = this.getWeatherEmoji(celsiusValue);
      
      console.log(`${emoji} ${value}°${fromUnit} = ${result.toFixed(2)}°${toUnit}`);
      
      // Add description
      if (celsiusValue < 0) {
        console.log("   🧊 Below freezing!");
      } else if (celsiusValue > 30) {
        console.log("   🏖️ Beach weather!");
      } else if (celsiusValue > 20) {
        console.log("   👕 T-shirt weather!");
      } else {
        console.log("   🧥 Jacket recommended!");
      }
    } catch (error) {
      console.log(error.message);
    }
  }
  
  // 📜 Show conversion history
  showHistory(): void {
    console.log("\n📜 Conversion History:");
    this.history.forEach((record, index) => {
      console.log(`  ${index + 1}. ${record.from.value}°${record.from.unit} → ${record.to.value.toFixed(2)}°${record.to.unit}`);
    });
  }
}

// 🎮 Demo the converter
console.log("🌡️ TypeScript Temperature Converter\n");

const converter = new TemperatureConverter();

// Test conversions
converter.displayConversion(25, "C", "F");
converter.displayConversion(32, "F", "C");
converter.displayConversion(300, "K", "C");
converter.displayConversion(100, "C", "K");

converter.showHistory();

🎓 Key Takeaways

You’ve successfully written your first TypeScript programs! Here’s what you’ve learned:

✅ Created TypeScript files and compiled them 💪
✅ Used types for variables, functions, and objects 🛡️
✅ Built interactive programs with classes and interfaces 🎯
✅ Handled user input safely with validation 🔒
✅ Applied best practices from the start! 🚀

Remember: Every expert TypeScript developer started with a simple “Hello World”! 🌟

🤝 Next Steps

Congratulations! 🎉 You’ve written real TypeScript programs!

Here’s what to do next:

💻 Complete the temperature converter challenge
🏗️ Expand one of the examples with your own features
📚 Try the TypeScript Playground online
🌟 Share your first program with others!

Remember: The best way to learn is by building. Keep coding! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn