TypeScript vs JavaScript: A Beginner's Guide to the Key Differences

// A simple function to calculate the total price of an order
function calculateOrderTotal(itemPrice, quantity) {
  // JavaScript does NOT check that these are numbers
  // If someone passes a string by accident, JS just concatenates instead of multiplying
  return itemPrice * quantity;
}

// Correct usage — works perfectly
console.log(calculateOrderTotal(9.99, 3)); // Expected: 29.97

// Accidental bug — someone passed a string instead of a number
// JavaScript does NOT warn you. It tries to handle it silently.
console.log(calculateOrderTotal("9.99", 3)); // Still works! JS coerces the string

// But this version breaks silently — no error, just wrong data
function greetCustomer(firstName, lastName) {
  return "Hello, " + firstName + " " + lastName + "!";
}

// What if a caller accidentally passes an object instead of a string?
const customerData = { first: "Alice", last: "Smith" };

// No error thrown — JavaScript just converts the object to "[object Object]"
console.log(greetCustomer(customerData, "Smith")); // Wrong output, no warning

// TypeScript: we declare the TYPES of our function parameters
// The ': number' after each parameter name is a type annotation
function calculateOrderTotal(itemPrice: number, quantity: number): number {
  // TypeScript now KNOWS both values must be numbers
  // If someone passes a string, it will error BEFORE the code runs
  return itemPrice * quantity;
}

// Correct usage — works perfectly
console.log(calculateOrderTotal(9.99, 3)); // Output: 29.97

// This line would cause a TypeScript ERROR immediately in your editor:
// Argument of type 'string' is not assignable to parameter of type 'number'
// calculateOrderTotal("9.99", 3); // <-- TypeScript REFUSES to compile this

// Another example: typed variables
let customerName: string = "Alice"; // Must always be a string
let loyaltyPoints: number = 150;    // Must always be a number
let isPremiumMember: boolean = true; // Must always be true or false

// This would be a compile-time error — caught before running:
// loyaltyPoints = "one hundred and fifty"; // Error: Type 'string' not assignable to type 'number'

// TypeScript also lets you describe the shape of objects using an 'interface'
interface Customer {
  firstName: string; // firstName must be a string
  lastName: string;  // lastName must be a string
  loyaltyPoints: number; // loyaltyPoints must be a number
}

// Now greetCustomer ONLY accepts a proper Customer object
function greetCustomer(customer: Customer): string {
  return `Hello, ${customer.firstName} ${customer.lastName}!`;
}

const aliceSmith: Customer = {
  firstName: "Alice",
  lastName: "Smith",
  loyaltyPoints: 150
};

console.log(greetCustomer(aliceSmith)); // Works perfectly
// Passing the wrong shape would be caught INSTANTLY by TypeScript

// ─────────────────────────────────────────────
// JAVASCRIPT VERSION (no types — anything goes)
// ─────────────────────────────────────────────

// JS function — no enforcement on what gets passed in
function getDiscountedPriceJS(originalPrice, discountPercent) {
  const discountAmount = originalPrice * (discountPercent / 100);
  return originalPrice - discountAmount;
}

// These both "work" in JS — no complaints
console.log(getDiscountedPriceJS(100, 20));       // Correct: 80
console.log(getDiscountedPriceJS("100", "20"));   // Still runs! Output: 80 (lucky coercion)
console.log(getDiscountedPriceJS("cheap", 20));   // Output: NaN — silent failure!


// ─────────────────────────────────────────────
// TYPESCRIPT VERSION (types protect your logic)
// ─────────────────────────────────────────────

// Describe exactly what a Product looks like
interface Product {
  name: string;          // product name must be text
  originalPrice: number; // price must be a number
  stockCount: number;    // stock must be a number
}

// This function only accepts a Product object and a number
// The ': number' at the end declares what type the function RETURNS
function getDiscountedPriceTS(product: Product, discountPercent: number): number {
  const discountAmount = product.originalPrice * (discountPercent / 100);
  return product.originalPrice - discountAmount;
}

// TypeScript ensures this object matches the Product interface perfectly
const headphones: Product = {
  name: "Wireless Headphones",
  originalPrice: 120,
  stockCount: 45
};

console.log(getDiscountedPriceTS(headphones, 25)); // Output: 90

// Trying to pass wrong data would be caught BEFORE running:
// getDiscountedPriceTS({ name: "Headphones", originalPrice: "cheap" }, 25);
// Error: Type 'string' is not assignable to type 'number' for 'originalPrice'

// Trying to pass a missing property would also be caught:
// const brokenProduct = { name: "Mic" }; // Missing originalPrice and stockCount
// getDiscountedPriceTS(brokenProduct, 10); // Error: missing required properties

// Real-world benefit: TypeScript's autocomplete and safety in a mini shopping cart

// Define the shape of a cart item
interface CartItem {
  productId: string;
  productName: string;
  unitPrice: number;
  quantity: number;
}

// Define the shape of a complete shopping cart
interface ShoppingCart {
  cartId: string;
  customerId: string;
  items: CartItem[];  // An array of CartItem objects
  createdAt: Date;
}

// Function to add an item to a cart and return the updated cart
// TypeScript guarantees: input is a ShoppingCart, item is a CartItem, output is a ShoppingCart
function addItemToCart(cart: ShoppingCart, newItem: CartItem): ShoppingCart {
  // TypeScript knows cart.items is an array — so .push() autocompletes correctly
  return {
    ...cart,                         // Copy all existing cart properties
    items: [...cart.items, newItem]  // Add the new item to the items array
  };
}

// Function to calculate the total cost — TypeScript ensures the maths is safe
function calculateCartTotal(cart: ShoppingCart): number {
  return cart.items.reduce((runningTotal, item) => {
    // TypeScript knows item.unitPrice and item.quantity are both numbers
    // So this multiplication is guaranteed safe — no string coercion surprises
    return runningTotal + (item.unitPrice * item.quantity);
  }, 0); // 0 is the starting total
}

// Build a real cart
const myCart: ShoppingCart = {
  cartId: "cart-001",
  customerId: "user-789",
  items: [
    { productId: "prod-1", productName: "Mechanical Keyboard", unitPrice: 89.99, quantity: 1 }
  ],
  createdAt: new Date()
};

// Add a second item
const updatedCart = addItemToCart(myCart, {
  productId: "prod-2",
  productName: "USB-C Hub",
  unitPrice: 34.50,
  quantity: 2
});

console.log("Items in cart:", updatedCart.items.length);
console.log("Cart total: $" + calculateCartTotal(updatedCart).toFixed(2));