Why TypeScript?

Have you ever spent hours debugging a JavaScript application, only to find that a simple typo or type mismatch was causing the problem? TypeScript solves these real-world problems by catching errors before your code runs.

If you are new to JavaScript, check out our comprehensive course

The Problem: JavaScript's flexibility can be a curse

JavaScript's dynamic nature allows you to write code quickly, but it can also hide bugs until runtime. Let's look at a common scenarios:

Example: Building a Pizza Order System

Imagine you're building a pizza ordering application. In JavaScript, you might write:

function calculateTotal(price, quantity) {
  return price * quantity;
}

// Later in your code...
const pizzaPrice = "10.99"; // Oops! This is a string, not a number
const quantity = 2;

const total = calculateTotal(pizzaPrice, quantity);
console.log(total); // Outputs: 21.98 (works by accident due to type coercion)

// But the real issue shows up here:
function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`; // toFixed only works on numbers
}

formatCurrency(total); // Works (21.98 becomes number)
formatCurrency(pizzaPrice); // Uncaught TypeError: amount.toFixed is not a function

function calculateTotal(price, quantity) {
  return price * quantity;
}

// Later in your code...
const pizzaPrice = "10.99"; // Oops! This is a string, not a number
const quantity = 2;

const total = calculateTotal(pizzaPrice, quantity);
console.log(total); // Outputs: 21.98 (works by accident due to type coercion)

// But the real issue shows up here:
function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`; // toFixed only works on numbers
}

formatCurrency(total); // Works (21.98 becomes number)
formatCurrency(pizzaPrice); // Uncaught TypeError: amount.toFixed is not a function

Uncaught TypeError: amount.toFixed is not a function - TypeError is the key here, showing the importance of having the correct type of data.

This bug might not be discovered until a customer places an order and sees an incorrect total.

Another common issue: property access errors

const order = {
  pizzaName: "Margherita",
  price: 10.99
};

// Later, you accidentally typo the property name
console.log(order.pizzaName); // Works fine "Margherita"
console.log(order.pizzaNme);  // Returns undefined, but no error

const order = {
  pizzaName: "Margherita",
  price: 10.99
};

// Later, you accidentally typo the property name
console.log(order.pizzaName); // Works fine "Margherita"
console.log(order.pizzaNme);  // Returns undefined, but no error

JavaScript won't warn you about the typo. The code runs, but returns undefined, this can cause issues later in your code.

Solution: TypeScript catches these errors early

TypeScript helps you catch these issues before your code runs.

Example 1: Type safety prevents calculation errors

Using our example from earlier, the calculateTotal function now only accepts the type of number:

// parameters restricted to only accept numbers
function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

const pizzaPrice = "10.99";
const quantity = 2;

const total = calculateTotal(pizzaPrice, quantity); // Error caught here

// parameters restricted to only accept numbers
function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

const pizzaPrice = "10.99";
const quantity = 2;

const total = calculateTotal(pizzaPrice, quantity); // Error caught here

Run the above code, TypeScript immediately shows you the error in your editor preventing the bug from reaching production.

Example 2: Autocomplete and property checking

Our second example can be improved by using TypeScript to better understand our code, providing autocomplete and catching typo's immediately:

interface Order {
  pizzaName: string;
  price: number;
  quantity: number;
}

const order: Order = {
  pizzaName: "Margherita",
  price: 10.99,
  quantity: 2
};

// TypeScript provides autocomplete suggestions
console.log(order.pizzaName); // TypeScript knows this property exists and logs the value

// TypeScript catches the typo immediately
console.log(order.pizzaNme); // Property 'pizzaNme' does not exist on type 'Order'. Did you mean 'pizzaName'?

interface Order {
  pizzaName: string;
  price: number;
  quantity: number;
}

const order: Order = {
  pizzaName: "Margherita",
  price: 10.99,
  quantity: 2
};

// TypeScript provides autocomplete suggestions
console.log(order.pizzaName); // TypeScript knows this property exists and logs the value

// TypeScript catches the typo immediately
console.log(order.pizzaNme); // Property 'pizzaNme' does not exist on type 'Order'. Did you mean 'pizzaName'?

Example 3: Refactoring with confidence

When you need to rename a property or function, TypeScript helps you find all locations to update. Imagine you wanted to rename pizzaName to be name:

// rename 'pizzaName' to 'name'
interface Order {
  name: string;
  price: number;
}

const order: Order = {
  pizzaName: "Margherita", // this line will be highlighted
  price: 10.99
};

function displayOrder(order: Order) {
  console.log(order.pizzaName); // // this line will be highlighted
}

Using TypeScript and modern IDE's, everywhere pizzaName is used will be highlighted to update.

Key benefits summary

1. Catch Bugs Early: Find errors during development, not in production
2. Better IDE Support: Get intelligent autocomplete and suggestions from your IDE/editor
3. Self-Documenting Code: Types show what your code expects and returns
4. Confident Refactoring: Safely refactor code knowing TypeScript will catch breaking changes
5. Team Collaboration: Types make code easier to understand for other developers
6. Better Developer Experience: Spend less time debugging

Next Steps

Now that you understand why TypeScript is valuable, in the next lesson we will cover what TypeScript is technically and how it works under the hood.