Lesson 3.4: Why TypeScript — Our Choice for This Course

Duration: 45 minutes

Learning Objectives

After completing this lesson, you will be able to:

• Understand the relationship between JavaScript and TypeScript
• Explain the key benefits of TypeScript over plain JavaScript
• Know why TypeScript is becoming the industry standard
• Feel confident that you're learning a valuable, in-demand skill

Introduction

Out of hundreds of programming languages, we chose TypeScript for this course series. This wasn't a random choice. TypeScript combines the power and popularity of JavaScript with features that make coding safer, faster, and more enjoyable. Let's explore why.

Main Content

The JavaScript Story

To understand TypeScript, you first need to know about JavaScript.

JavaScript was created in just 10 days in 1995 by Brendan Eich at Netscape. It was designed to add simple interactivity to web pages — things like form validation and button clicks.

Nobody expected JavaScript to become one of the most important programming languages in history.

1995: JavaScript created for simple web interactions
        │
        ▼
2000s: Ajax enables interactive web applications
        │
        ▼
2009: Node.js brings JavaScript to servers
        │
        ▼
2010s: JavaScript becomes full-stack language
        │
        ▼
Today: JavaScript runs everywhere
       - Browsers (Chrome, Firefox, Safari)
       - Servers (Node.js)
       - Mobile apps (React Native)
       - Desktop apps (Electron)
       - IoT devices
       - AI applications

The Problem with JavaScript

JavaScript's flexibility is both its strength and weakness. It lets you write code quickly, but it also lets you write broken code easily.

Example of JavaScript's flexibility:

// JavaScript allows this... but it's probably wrong
let userAge = '25'; // age stored as text
let nextYear = userAge + 1; // What's 25 + 1?

console.log(nextYear); // Outputs: "251" (not 26!)

JavaScript silently did string concatenation instead of math. No error, no warning — just a bug waiting to cause problems in production.

Other JavaScript issues:

// Calling a function with wrong arguments
function greet(firstName, lastName) {
  return 'Hello, ' + firstName + ' ' + lastName;
}

greet('John'); // No error! Returns "Hello, John undefined"
greet(42, true, 'extra'); // No error! Returns "Hello, 42 true"

Enter TypeScript

TypeScript was created by Microsoft in 2012 to solve these problems. It adds a type system to JavaScript.

Think of types as labels that tell you what kind of data something is:

The same example in TypeScript:

// TypeScript catches the error BEFORE you run the code
let userAge: number = "25";  // ERROR: Type 'string' is not assignable to type 'number'

// Fixed version
let userAge: number = 25;
let nextYear: number = userAge + 1;  // 26 - correct!

// TypeScript checks function calls
function greet(firstName: string, lastName: string): string {
  return 'Hello, ' + firstName + ' ' + lastName;
}

greet('John'); // ERROR: Expected 2 arguments, but got 1
greet(42, true); // ERROR: Argument of type 'number' is not assignable
greet('John', 'Doe'); // Works perfectly!

TypeScript = JavaScript + Types

TypeScript isn't a completely different language. It's JavaScript with extra features.

┌─────────────────────────────────────────────────────────────┐
│                      TYPESCRIPT                              │
│  ┌───────────────────────────────────────────────────────┐  │
│  │                     JAVASCRIPT                         │  │
│  │                                                        │  │
│  │   Variables, functions, loops, objects, arrays...     │  │
│  │                                                        │  │
│  └───────────────────────────────────────────────────────┘  │
│                                                              │
│   + Types (string, number, boolean, custom types)           │
│   + Interfaces (describe object shapes)                     │
│   + Better tooling (autocomplete, refactoring)             │
│   + Catches errors before running                          │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Key insight: All valid JavaScript is also valid TypeScript. TypeScript is a superset of JavaScript.

Benefits of TypeScript

1. Catch Errors Early

Without TypeScript:
Write code → Run code → See error → Fix → Repeat
             (might be in production!)

With TypeScript:
Write code → Editor shows error immediately → Fix → Run code
             (before it reaches users!)

2. Amazing Autocomplete

Your editor knows what properties and methods are available:

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

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

user.  // Editor shows: name, email, age
//     No more guessing or looking up documentation!

3. Self-Documenting Code

Types act as built-in documentation:

// Without types - what does this function expect?
function processOrder(order, customer, options) {
  // ???
}

// With types - crystal clear!
function processOrder(
  order: Order,
  customer: Customer,
  options: { priority: boolean; sendEmail: boolean }
): Receipt {
  // Now you know exactly what to pass and what you get back
}

4. Safer Refactoring

When you rename or change something, TypeScript finds all the places that need updating:

// If you rename 'email' to 'emailAddress' in the User interface,
// TypeScript will show errors everywhere 'email' was used
// No more Find & Replace mistakes!

TypeScript in the Real World

Major companies use TypeScript in production:

Stack Overflow 2024 Survey:

• TypeScript is in the top 5 most loved languages
• JavaScript is in the top 3 most used languages
• Together, they dominate web development

TypeScript vs JavaScript: When to Use Each

For this course: We'll use TypeScript from the beginning. This way, you'll build good habits and learn the industry standard.

How TypeScript Works

TypeScript code can't run directly. It must be compiled (translated) to JavaScript first:

┌─────────────────┐      ┌────────────┐      ┌─────────────────┐
│  TypeScript     │  ──→ │   tsc      │  ──→ │   JavaScript    │
│  (.ts file)     │      │ (compiler) │      │   (.js file)    │
└─────────────────┘      └────────────┘      └─────────────────┘
                                                     │
                                                     ▼
                                             ┌─────────────────┐
                                             │  Browser/Node   │
                                             │   (executes)    │
                                             └─────────────────┘

Don't worry — this process is automatic and happens in the background.

Your TypeScript Journey

Here's what you'll learn in this course series:

Course 1 (Current)
└── Understanding what programming is ✓

Course 2: TypeScript Fundamentals
├── Variables and types
├── Functions and interfaces
├── Classes and generics
└── Building projects

Course 3: Async & Data
├── Working with APIs
├── Handling asynchronous code
└── Data transformation

Course 4-5: AI Development
├── Using AI APIs with TypeScript
├── Building chatbots and agents
└── Real-world AI applications

By the end, you'll be able to build modern, type-safe applications — including AI-powered ones.

Practice Exercise

Task 1: Spot the Bug

These JavaScript examples have bugs. How would TypeScript help catch them?

Example 1:

function calculateArea(width, height) {
  return width * height;
}

calculateArea('10', 5); // What's the result?

function calculateArea(width: number, height: number): number {
  return width * height;
}

calculateArea('10', 5); // ERROR: Argument of type 'string' is not assignable

Example 2:

const user = {
  name: 'John',
  email: 'john@example.com',
};

console.log(user.emial); // Typo!

Task 2: Why TypeScript?

In your own words, write 3 reasons why TypeScript is a good choice for learning programming.

Task 3: Company Research

Pick one company from the list (Microsoft, Google, Airbnb, Slack, Stripe, Netflix) and find one open-source TypeScript project they maintain.

Key Takeaways

• TypeScript = JavaScript + Types — it's not a different language, it's an enhancement
• Types prevent bugs by catching errors before your code runs
• Autocomplete and documentation come free with TypeScript
• Major companies use TypeScript for production applications
• TypeScript compiles to JavaScript — browsers and Node.js run the resulting JavaScript
• Learning TypeScript first builds better habits than learning JavaScript alone
• This course series will teach you TypeScript from the ground up

Resources