// Define an interface
interface User {
    firstName: string;
    lastName: string;
    age: number;
    isStudent: boolean;
}

// Now use it — the object must match the interface exactly
let user1: User = {
    firstName: "Alice",
    lastName: "Wonderland",
    age: 25,
    isStudent: true
};   // ✅ All properties present and correct types

// TypeScript will catch missing or wrong-typed properties:
let user2: User = {
    firstName: "Bob",
    lastName: "Builder",
    age: "thirty"   // ❌ Error: 'string' is not assignable to type 'number'
    // Also missing isStudent — TypeScript will flag that too
};

interface Product {
    name: string;
    price: number;
    description?: string;   // Optional — might not be present
    discount?: number;      // Optional — might not be present
}

// Valid — required fields only
let item1: Product = {
    name: "Laptop",
    price: 999.99
};   // ✅ Fine — description and discount are optional

// Also valid — with optional fields included
let item2: Product = {
    name: "Phone",
    price: 499.99,
    description: "Latest model",
    discount: 50
};   // ✅ Also fine

// An interface that describes a function:
// takes two numbers, returns a number
interface Operation {
    (a: number, b: number): number;
}

// Now create functions that match this interface
const add: Operation = function(a, b) {
    return a + b;
};

const subtract: Operation = function(a, b) {
    return a - b;
};

const multiply: Operation = function(a, b) {
    return a * b;
};

// TypeScript ensures every Operation function is consistent:
add(10, 5);       // ✅  returns 15
subtract(10, 5);  // ✅  returns 5

// Trying to use wrong types → instant error
add("10", 5);     // ❌ Error: Argument of type 'string' is not assignable to type 'number'

// Parameter types come after the colon
// Return type comes after the closing parenthesis

function add(a: number, b: number): number {
    return a + b;
}
//           ^^^^^^^^   ^^^^^^^^   ^^^^^^
//           param a    param b    return type

function greet(name: string): string {
    return `Hello, ${name}!`;
}

function isAdult(age: number): boolean {
    return age >= 18;
}

// Calling them correctly
add(10, 5);              // ✅ 15
greet("Alice");          // ✅ "Hello, Alice!"
isAdult(25);             // ✅ true

// Calling them wrong → TypeScript errors immediately
add("ten", 5);           // ❌ Error: 'string' not assignable to 'number'
greet(42);               // ❌ Error: 'number' not assignable to 'string'

// void means "this function doesn't return a value"
function showResult(message: string, isError: boolean): void {
    const resultDiv = document.querySelector('#result') as HTMLDivElement;
    resultDiv.textContent = message;
    resultDiv.className = isError ? 'error' : 'success';
    // No return statement — returns nothing → void
}

// Also used for event handler callbacks
function handleClick(): void {
    console.log("Button clicked!");
}

button.addEventListener('click', handleClick);

// Optional parameter with ?
function greet(name: string, title?: string): string {
    if (title) {
        return `Hello, ${title} ${name}!`;
    }
    return `Hello, ${name}!`;
}

greet("Alice");          // ✅ "Hello, Alice!"
greet("Smith", "Dr");    // ✅ "Hello, Dr Smith!"

// Default parameter values
function calculateTax(price: number, rate: number = 0.08): number {
    return price * rate;
}

calculateTax(100);        // ✅ 8 (uses default rate of 0.08)
calculateTax(100, 0.15);  // ✅ 15 (uses provided rate of 0.15)

cd calculator-project
tsc --init

This creates a tsconfig.json file with many options. For this project, the defaults are fine, but make sure the DOM library is included (it usually is by default). Your project folder now looks like:

📁 calculator-project/
├── 📄 index.html      ← HTML (unchanged from Day 4)
├── 🎨 style.css       ← CSS (unchanged from Day 4)
├── ⚡ script.js       ← OLD JavaScript (we'll replace this)
├── 🔷 script.ts       ← NEW TypeScript file (we'll write this)
└── ⚙️ tsconfig.json   ← TypeScript configuration

// Define the interface for any math operation
// It takes two numbers and returns a number
interface Operation {
    (a: number, b: number): number;
}

// Now use the interface to type our functions
const add: Operation = (a, b) => a + b;
const subtract: Operation = (a, b) => a - b;
const multiply: Operation = (a, b) => a * b;
const divide: Operation = (a, b) => a / b;

// A helper to run any operation generically
function calculate(op: Operation, a: number, b: number): number {
    return op(a, b);
}

// Now we can call any operation the same way
calculate(add, 10, 5);       // 15
calculate(multiply, 4, 7);   // 28
calculate(divide, 20, 4);    // 5

// =============================================
// JavaScript Calculator → TypeScript (Day 5)
// =============================================


// PART A: Interface Definitions
// =============================================

// Defines what any calculator operation must look like:
// a function that takes two numbers and returns a number
interface Operation {
    (a: number, b: number): number;
}

// Defines what a pair of valid inputs looks like
interface CalculatorInputs {
    num1: number;
    num2: number;
}


// PART B: Select & Type DOM Elements
// =============================================

// 'as HTMLInputElement' tells TypeScript these are input fields
// so it knows about .value, .placeholder, .type, etc.
const num1Input   = document.querySelector('#num1')      as HTMLInputElement;
const num2Input   = document.querySelector('#num2')      as HTMLInputElement;

// 'as HTMLButtonElement' tells TypeScript these are buttons
// so it knows about .disabled, .textContent, etc.
const addBtn      = document.querySelector('#addBtn')      as HTMLButtonElement;
const subtractBtn = document.querySelector('#subtractBtn') as HTMLButtonElement;
const multiplyBtn = document.querySelector('#multiplyBtn') as HTMLButtonElement;
const divideBtn   = document.querySelector('#divideBtn')   as HTMLButtonElement;

// 'as HTMLDivElement' tells TypeScript this is a div
// so it knows about .textContent, .innerHTML, .className, etc.
const resultDiv   = document.querySelector('#result')    as HTMLDivElement;


// PART C: Operation Functions (using the interface)
// =============================================

// Each of these matches the Operation interface:
// takes two numbers (a, b) and returns a number
const add: Operation = (a, b): number => a + b;
const subtract: Operation = (a, b): number => a - b;
const multiply: Operation = (a, b): number => a * b;
const divide: Operation = (a, b): number => a / b;


// PART D: Helper Functions (with full type signatures)
// =============================================

// Shows a result on the page
// message is a string, isError is a boolean, returns nothing (void)
function showResult(message: string, isError: boolean): void {
    resultDiv.textContent = message;
    resultDiv.className = isError ? 'error' : 'success';
}

// Reads and validates the input fields
// Returns a CalculatorInputs object, or null if inputs are invalid
function getInputs(): CalculatorInputs | null {
    // .value is always a string, so we convert with Number()
    const val1: string = num1Input.value;
    const val2: string = num2Input.value;

    // Check for empty fields
    if (val1 === '' || val2 === '') {
        showResult('⚠️ Please fill in both number fields!', true);
        return null;
    }

    const num1: number = Number(val1);
    const num2: number = Number(val2);

    // Check for invalid (non-numeric) input
    if (isNaN(num1) || isNaN(num2)) {
        showResult('⚠️ Please enter valid numbers!', true);
        return null;
    }

    // Return a typed CalculatorInputs object
    return { num1, num2 };
}

// Performs a calculation using any Operation function
// op is an Operation (takes two numbers, returns number)
// symbol is the display symbol like "+", "-", etc.
function performCalculation(
    op: Operation,
    symbol: string,
    checkDivision: boolean = false
): void {
    // Get and validate inputs
    const inputs: CalculatorInputs | null = getInputs();
    if (inputs === null) return;

    const { num1, num2 } = inputs;

    // Special check for division by zero
    if (checkDivision && num2 === 0) {
        showResult('⚠️ Cannot divide by zero!', true);
        return;
    }

    // Perform the calculation
    const rawResult: number = op(num1, num2);

    // Round to 4 decimal places to avoid floating-point messiness
    const result: number = Math.round(rawResult * 10000) / 10000;

    // Display the result
    showResult(`${num1} ${symbol} ${num2} = ${result}`, false);
}


// PART E: Event Listeners
// =============================================

addBtn.addEventListener('click', (): void => {
    performCalculation(add, '+');
});

subtractBtn.addEventListener('click', (): void => {
    performCalculation(subtract, '-');
});

multiplyBtn.addEventListener('click', (): void => {
    performCalculation(multiply, '×');
});

divideBtn.addEventListener('click', (): void => {
    performCalculation(divide, '÷', true);  // true = check for divide by zero
});

One-time compile:

tsc script.ts

Watch mode (auto-recompile on save — recommended):

tsc script.ts --watch

If your folder has tsconfig.json, just run:

tsc --watch

Side-by-Side: TypeScript Source vs Compiled JavaScript

interface Operation {
  (a: number, b: number): number;
}

const add: Operation =
  (a, b): number => a + b;

function showResult(
  message: string,
  isError: boolean
): void {
  resultDiv.textContent = message;
}

// (interface removed — runtime only)



const add =
  (a, b) => a + b;

function showResult(
  message,
  isError
) {
  resultDiv.textContent = message;
}

The type annotations are completely stripped during compilation. The JavaScript output is clean and browser-ready.

Task: Annotate these variables with the correct types, then intentionally create a type error to see what TypeScript shows you.

// Add the correct type annotation to each variable
let productName = "Wireless Keyboard";  // Add ': ___' here
let productPrice = 79.99;               // Add ': ___' here
let inStock = true;                     // Add ': ___' here
let quantity = 50;                      // Add ': ___' here
let categories = ["tech", "office"];    // Add ': ___' here

// Now try assigning the wrong type to one of them:
// productName = 100;  // Uncomment this — what error do you see?
// inStock = "yes";    // Uncomment this — what error do you see?

Task: Add type annotations to this function and fix any type errors.

// Add types to parameters and return value
function calculateTotal(price, quantity, taxRate) {
    let subtotal = price * quantity;
    let tax = subtotal * taxRate;
    return subtotal + tax;
}

// This should work:
let total = calculateTotal(29.99, 3, 0.08);
console.log("Total:", total);

// This should cause a TypeScript error once you add types:
// let wrong = calculateTotal("free", 3, 0.08);

Solution:

function calculateTotal(
    price: number,
    quantity: number,
    taxRate: number
): number {
    let subtotal: number = price * quantity;
    let tax: number = subtotal * taxRate;
    return subtotal + tax;
}

Task: Define an interface for a blog post and create two objects that match it.

// Create an interface called BlogPost with these fields:
// - title: string (required)
// - content: string (required)
// - author: string (required)
// - likes: number (required)
// - isPublished: boolean (required)
// - tags: string[] (required — array of strings)
// - coverImage: string (optional)

// Your interface here:
interface BlogPost {
    // ... fill this in
}

// Then create two blog posts using your interface:
let post1: BlogPost = {
    // ... fill this in
};

let post2: BlogPost = {
    // ... fill this in (include the optional coverImage)
};

Task: Add a "Power" button to the TypeScript calculator. It should raise num1 to the power of num2 (e.g. 2^8 = 256). Use the Operation interface and type everything correctly.

// Hint: Math.pow(a, b) raises a to the power of b
// Or use the ** operator: a ** b

// 1. Create a power operation that matches the Operation interface
const power: Operation = (a, b): number => {
    // Your code here
};

// 2. Add a button in index.html:
// ^ Power

// 3. Select and type the button in script.ts
const powerBtn = document.querySelector('#powerBtn') as HTMLButtonElement;

// 4. Add the event listener
powerBtn.addEventListener('click', (): void => {
    performCalculation(power, '^');
});

Task: Create a typed history system that stores the last 5 calculations as objects with a specific shape.

// Define a HistoryEntry interface
interface HistoryEntry {
    expression: string;  // e.g. "10 + 5 = 15"
    result: number;
    timestamp: string;   // e.g. "3:45 PM"
}

// Typed history array — must only contain HistoryEntry objects
let history: HistoryEntry[] = [];

// Function to add to history
function addToHistory(expression: string, result: number): void {
    const now: Date = new Date();
    const timestamp: string = now.toLocaleTimeString();

    const entry: HistoryEntry = {
        expression,
        result,
        timestamp
    };

    history.unshift(entry);  // Add to front
    if (history.length > 5) {
        history.pop();        // Remove oldest if more than 5
    }

    console.log("History:", history);
}

// Test it:
addToHistory("10 + 5 = 15", 15);
addToHistory("100 × 0.08 = 8", 8);
addToHistory("25 - 7 = 18", 18);

// ===== VARIABLES =====
let name: string = "Alice";
let age: number = 25;
let isActive: boolean = true;
let scores: number[] = [85, 92, 78];

// ===== FUNCTIONS =====
function greet(name: string): string {
    return `Hello, ${name}!`;
}

function log(message: string): void {
    console.log(message);
}

function maybe(value?: string): string {
    return value ?? "default";
}

// ===== INTERFACES =====
interface User {
    name: string;
    age: number;
    email?: string;   // optional
}

interface Operation {
    (a: number, b: number): number;
}

// ===== DOM ELEMENTS =====
const input   = document.querySelector('#id') as HTMLInputElement;
const button  = document.querySelector('#id') as HTMLButtonElement;
const div     = document.querySelector('#id') as HTMLDivElement;

// ===== UNION TYPES =====
let value: string | number = "hello";
value = 42;  // also OK

// ===== TYPE INFERENCE (automatic) =====
let x = "hello";  // TypeScript infers: string
let y = 42;       // TypeScript infers: number

// ===== COMPILING =====
// tsc filename.ts           (compile once)
// tsc filename.ts --watch   (auto-compile on save)
// tsc --watch               (with tsconfig.json)