JavaScript vs TypeScript — NaN Crash That Cost $40k

// 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));

// PITFALL 1: Overusing 'any'
function processOrder(items: any[]) { // defeats type checking
  return items.map(item => item.price * item.qty); // no safety
}

// FIX: Use a proper interface and 'unknown' for uncertain data
interface OrderItem {
  price: number;
  qty: number;
}

function safeProcessOrder(items: unknown[]): number {
  return items.reduce((total: number, item: unknown) => {
    // TypeScript forces us to check the shape
    if (typeof item === 'object' && item !== null &&
        'price' in item && 'qty' in item) {
      const orderItem = item as OrderItem;
      return total + orderItem.price * orderItem.qty;
    }
    throw new Error('Invalid item shape');
  }, 0);
}

// PITFALL 2: No runtime validation for external data
// TypeScript trusts your interface; does NOT check at runtime
async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json(); // TypeScript thinks it's User, but API could return anything
}

// FIX: Use a runtime validator like Zod
import { z } from 'zod';
const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string().email()
});
type User = z.infer<typeof UserSchema>;

async function safeFetchUser(id: string): Promise<User> {
  const raw = await fetch(`/api/users/${id}`).then(r => r.json());
  return UserSchema.parse(raw); // throws if shape is wrong
}

// PITFALL 3: Using interface as a constructor
// THIS IS WRONG:
// const user = new User(); // Error: 'User' refers to a type, not a class
// Use classes when you need instances, interfaces only for type contracts

{
  "compilerOptions": {
    // Enable strict mode: the most important setting for catching bugs
    "strict": true,
    // Prevent emitting JS if there are any type errors
    "noEmitOnError": true,
    // Catch dead code
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    // Ensure consistent casing across imports
    "forceConsistentCasingInFileNames": true,
    // Target modern JavaScript (ES2020+)
    "target": "ES2020",
    // Module system for Node.js
    "module": "commonjs",
    // Enable source maps for debugging
    "sourceMap": true,
    // Base directory for source files
    "rootDir": "./src",
    // Output directory for compiled JS
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}