Lesson 2.1: Why TypeScript

Duration: 50 minutes

Learning Objectives

By the end of this lesson, you will be able to:

• Understand the problems that TypeScript solves
• Explain the difference between static and dynamic typing
• Recognize common JavaScript errors that TypeScript prevents
• Appreciate the benefits of type safety in large projects

The Problem with JavaScript

JavaScript is a powerful and flexible language, but that flexibility can be a double-edged sword. Let us look at some common issues.

Problem 1: Silent Failures

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

// This works fine
console.log(calculateTotal(10, 5)); // Output: 50

// But what about this?
console.log(calculateTotal('10', 5)); // Output: 50 (JavaScript converts "10" to 10)
console.log(calculateTotal('ten', 5)); // Output: NaN (Not a Number) - no error!

JavaScript does not complain when you pass the wrong type of data. It tries to make it work, often with unexpected results.

Problem 2: Typos in Property Names

const user = {
  name: 'Alice',
  email: 'alice@example.com',
};

// Typo in property name - no error!
console.log(user.emial); // Output: undefined (not an error)

You might spend hours debugging why your code does not work, only to find a simple typo.

Problem 3: Missing Function Arguments

function greet(firstName, lastName) {
  return 'Hello, ' + firstName + ' ' + lastName;
}

// Forgot an argument - no error!
console.log(greet('Alice')); // Output: "Hello, Alice undefined"

JavaScript happily runs with missing arguments, filling them with undefined.

What is TypeScript?

TypeScript is JavaScript with added syntax for types. It was created by Microsoft to help developers write more reliable code.

// TypeScript
function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

calculateTotal('10', 5); // Error! Argument of type 'string' is not assignable to parameter of type 'number'

The : number tells TypeScript what type each value should be. If you try to pass the wrong type, you get an error before your code runs.

TypeScript is a Superset of JavaScript

Every valid JavaScript code is also valid TypeScript code. You can gradually add types to existing JavaScript projects.

┌─────────────────────────────┐
│        TypeScript           │
│   ┌─────────────────────┐   │
│   │     JavaScript      │   │
│   │                     │   │
│   └─────────────────────┘   │
│   + Type System             │
│   + Interfaces              │
│   + Generics                │
│   + Better Tooling          │
└─────────────────────────────┘

Static vs Dynamic Typing

Dynamic Typing (JavaScript)

Types are checked while the program is running.

let message = 'Hello';
message = 42; // JavaScript allows this - no error
message = true; // Still no error

// Problems appear at runtime (when the program runs)

Static Typing (TypeScript)

Types are checked before the program runs (at compile time).

let message: string = 'Hello';
message = 42; // Error! Type 'number' is not assignable to type 'string'
message = true; // Error! Type 'boolean' is not assignable to type 'string'

// Problems appear immediately in your editor

Think of it like a spell-checker. Would you rather find spelling mistakes:

• After you print and mail the letter? (Dynamic typing)
• While you are writing it? (Static typing)

Benefits of TypeScript

1. Catch Errors Early

TypeScript finds bugs before your users do.

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

function sendEmail(user: User) {
  // TypeScript knows exactly what properties user has
  console.log('Sending email to: ' + user.email);
}

const alice = { id: 1, name: 'Alice' };
sendEmail(alice); // Error! Property 'email' is missing

2. Better Code Completion

Your editor understands your code and offers helpful suggestions.

const user = {
  name: "Alice",
  email: "alice@example.com"
};

user. // Editor shows: name, email (only valid options)

Without types, your editor cannot know what properties exist on an object.

3. Self-Documenting Code

Types serve as documentation that stays in sync with your code.

// Without types - what does this function expect? What does it return?
function processData(data) {
  // ???
}

// With types - crystal clear!
function processData(data: UserInput): ProcessedResult {
  // We know exactly what we're working with
}

4. Safer Refactoring

When you change something, TypeScript shows you everywhere that needs updating.

interface Product {
  name: string;
  price: number;
}

// If you rename 'price' to 'cost', TypeScript will show errors
// everywhere 'price' is used, so you don't miss anything

5. Works with Modern JavaScript

TypeScript supports all modern JavaScript features and compiles to older versions for browser compatibility.

// Write modern TypeScript
const greet = (name: string): string => `Hello, ${name}!`;

// Compiles to JavaScript that works everywhere

TypeScript in the Real World

Major companies use TypeScript for their largest projects:

• Microsoft: VS Code, Azure, Office
• Google: Angular framework
• Airbnb: Frontend applications
• Slack: Desktop application
• Shopify: Admin interface

The npm ecosystem has over 8,000 packages with built-in TypeScript definitions, and many more are being converted daily.

Common Misconceptions

"TypeScript is a Different Language"

Reality: TypeScript IS JavaScript. It just adds optional type annotations that are removed during compilation. The output is plain JavaScript.

"TypeScript is Only for Large Projects"

Reality: Even small projects benefit from better autocomplete and error catching. The setup time is minimal.

"TypeScript Makes Code Longer"

Reality: While you add type annotations, you often write less code because:

• Better autocomplete speeds up writing
• Fewer bugs means less debugging time
• Type inference reduces explicit annotations

// TypeScript infers types automatically when possible
const numbers = [1, 2, 3]; // TypeScript knows this is number[]
const doubled = numbers.map((n) => n * 2); // TypeScript knows n is a number

"I Need to Type Everything"

Reality: TypeScript has excellent type inference. You only need to add types where TypeScript cannot figure them out.

// No type annotation needed - TypeScript infers 'string'
const message = 'Hello, World!';

// Type annotation helpful for function parameters
function greet(name: string) {
  return 'Hello, ' + name;
}

When TypeScript Shines

TypeScript is particularly valuable when:

1. Working in a team - Types help others understand your code
2. Building APIs - Clear contracts between frontend and backend
3. Refactoring code - Safe changes with instant feedback
4. Using external libraries - Type definitions show you how to use them
5. Long-term projects - Types prevent regression bugs

Exercises

Exercise 1: Spot the Bugs

Look at this JavaScript code. What could go wrong at runtime?

function createUser(name, age, email) {
  return {
    name: name,
    age: age,
    email: email,
    createdAt: new Date(),
  };
}

const user = createUser('Alice', 'twenty-five', 'alice@example.com');
console.log('User will be ' + (user.age + 1) + ' next year');

function createUser(name: string, age: number, email: string) {
  return {
    name: name,
    age: age,
    email: email,
    createdAt: new Date(),
  };
}

createUser('Alice', 'twenty-five', 'alice@example.com');
// Error! Argument of type 'string' is not assignable to parameter of type 'number'

Exercise 2: Benefits Identification

Which benefit of TypeScript would help in each scenario?

1. A new developer joins the team and needs to understand how the codebase works
2. You rename a function parameter and need to update all call sites
3. You are using a library you have never used before
4. You accidentally use .lenght instead of .length

Exercise 3: Thinking Exercise

Consider this scenario: You are building a shopping cart feature. List three specific ways TypeScript could prevent bugs in this feature.

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

type DiscountType = 'percentage' | 'fixed';

function applyDiscount(total: number, discount: number, type: DiscountType): number {
  if (type === 'percentage') {
    return total * (1 - discount / 100);
  }
  return total - discount;
}

Key Takeaways

1. JavaScript is flexible but error-prone - Many bugs only appear at runtime
2. TypeScript adds static typing - Errors are caught before code runs
3. TypeScript is JavaScript - It compiles to plain JavaScript
4. Types improve developer experience - Better autocomplete, documentation, and refactoring
5. Type inference reduces boilerplate - You do not need to type everything explicitly
6. Real-world adoption is high - Major companies trust TypeScript for production code

Resources

Next Lesson

Now that you understand why TypeScript exists, let us set it up on your computer.

Continue to Lesson 2.2: Installation and Configuration