TypeScript vs JavaScript

// JavaScript
function calculateTotal(price, quantity, taxRate) {
  // No type checking - any type of argument will be accepted
  // This can lead to unexpected behavior
  return price * quantity * (1 + taxRate);
}

// These will run but might produce unexpected results
calculateTotal("10", 5, 0.1);  // "10" gets coerced to a number
calculateTotal(10, "5", 0.1);  // "5" gets coerced to a number
calculateTotal(10, 5);         // Missing parameter becomes undefined

// TypeScript
function calculateTotal(
  price: number, 
  quantity: number, 
  taxRate: number = 0
): number {
  // Type checking ensures all arguments are numbers
  // Default parameter value for taxRate
  return price * quantity * (1 + taxRate);
}

// These will cause compile-time errors
calculateTotal("10", 5, 0.1);  // Error: string not assignable to number
calculateTotal(10, "5", 0.1);  // Error: string not assignable to number
calculateTotal(10);            // Error: Expected 2-3 arguments, but got 1

// JavaScript
function processUser(user) {
  // No guarantee that user has these properties
  console.log(user.name);
  console.log(user.email);
  
  // This might fail at runtime if user.preferences doesn't exist
  if (user.preferences.darkMode) {
    enableDarkMode();
  }
}

// This will run but might fail at runtime
processUser({
  name: "John",
  // Missing email property
  // Missing preferences object
});

// TypeScript
interface UserPreferences {
  darkMode: boolean;
  notifications: boolean;
  language?: string;  // Optional property
}

interface User {
  id: number;
  name: string;
  email: string;
  preferences: UserPreferences;
}

function processUser(user: User): void {
  // TypeScript ensures user has all required properties
  console.log(user.name);
  console.log(user.email);
  
  // Safe to access nested properties
  if (user.preferences.darkMode) {
    enableDarkMode();
  }
}

// This will cause compile-time errors
processUser({
  name: "John",
  // Error: missing required properties
});

// JavaScript
function handleResponse(response) {
  // No way to know what shape response might have
  if (response.status === "success") {
    return response.data;
  } else {
    return response.error;
  }
}

// Need to check types at runtime
function getFirstItem(items) {
  if (Array.isArray(items) && items.length > 0) {
    return items[0];
  }
  return null;
}

// No way to ensure consistent structure
const userOrError = handleResponse(fetchUserData());

// TypeScript
// Union types
type Success<T> = {
  status: "success";
  data: T;
};

type Error = {
  status: "error";
  error: string;
};

type Response<T> = Success<T> | Error;

// Type narrowing with discriminated unions
function handleResponse<T>(response: Response<T>): T | string {
  // TypeScript knows which properties exist based on status
  if (response.status === "success") {
    return response.data;  // TypeScript knows this is type T
  } else {
    return response.error; // TypeScript knows this is string
  }
}

// Generic function
function getFirstItem<T>(items: T[]): T | null {
  return items.length > 0 ? items[0] : null;
}

// Type safety throughout the chain
const userOrError: User | string = 
  handleResponse<User>(fetchUserData());

// JavaScript
const user = {
  firstName: "John",
  lastName: "Doe",
  fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Typo in property name - only fails at runtime
console.log(user.firstname);  // undefined

// Typo in method name - only fails at runtime
console.log(user.getFullName());  // TypeError: not a function

// Incorrect property access - only fails at runtime
const count = user.posts.length;  // TypeError: Cannot read property 'length' of undefined

// TypeScript
interface User {
  firstName: string;
  lastName: string;
  fullName(): string;
}

const user: User = {
  firstName: "John",
  lastName: "Doe",
  fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Typo in property name - caught at compile time
console.log(user.firstname);  // Error: Property 'firstname' does not exist

// Typo in method name - caught at compile time
console.log(user.getFullName());  // Error: Property 'getFullName' does not exist

// Incorrect property access - caught at compile time
const count = user.posts.length;  // Error: Property 'posts' does not exist

// JavaScript
// Original function
function processPayment(payment) {
  const { amount, currency, customer } = payment;
  // Process payment logic...
}

// Later, we decide to change the parameter structure
// But we might miss some usages in a large codebase
function processPayment(paymentDetails) {
  const { amount, currency, customer } = paymentDetails;
  // Process payment logic...
}

// This call still works, but might not behave as expected
// if the structure of the object has changed
processPayment({
  amount: 100,
  // Missing currency and customer
});

// TypeScript
// Original interface and function
interface Payment {
  amount: number;
  currency: string;
  customer: string;
}

function processPayment(payment: Payment): void {
  const { amount, currency, customer } = payment;
  // Process payment logic...
}

// Later, we decide to change the parameter structure
interface PaymentDetails {
  amount: number;
  currency: string;
  customer: string;
  method: string;  // New required field
}

function processPayment(paymentDetails: PaymentDetails): void {
  const { amount, currency, customer, method } = paymentDetails;
  // Process payment logic...
}

// TypeScript will flag ALL existing calls to processPayment
// that don't include the new 'method' field
processPayment({
  amount: 100,
  currency: "USD",
  customer: "123"
  // Error: Property 'method' is missing
});