TypeScript vs JavaScript

The Core Difference

The primary distinction between TypeScript and JavaScript boils down to when errors are caught:

Key Differences in Detail

1. Type System

JavaScript: Dynamically typed - variables can change types freely, and types are only checked when code runs.

TypeScript: Statically typed - variable types are declared and enforced during development, catching type errors before runtime.

// JavaScript - Dynamic typing
let user = "John";
console.log(user.toUpperCase()); // "JOHN"

// Later in code...
user = 42;
console.log(user.toUpperCase()); 
// ❌ Runtime Error: toUpperCase is not a function

// TypeScript - Static typing
let user: string = "John";
console.log(user.toUpperCase()); // "JOHN"

// Later in code...
user = 42; 
// ❌ Compile Error: Type 'number' is not assignable to type 'string'
// Error caught BEFORE running!

2. Error Detection

JavaScript: Errors appear during execution, requiring extensive testing to catch bugs.

TypeScript: Most errors are caught by the compiler before code runs, reducing the need for defensive programming.

// JavaScript - Null/undefined bugs are common
function getUserName(user) {
  return user.name.toUpperCase();
}

const user1 = { name: "John" };
const user2 = null;

console.log(getUserName(user1)); // Works
console.log(getUserName(user2)); 
// ❌ Runtime Error: Cannot read property 'name' of null

// TypeScript - Null safety built-in
function getUserName(user: { name: string } | null): string {
  if (user === null) {
    return "Guest";
  }
  return user.name.toUpperCase();
}

const user1 = { name: "John" };
const user2 = null;

console.log(getUserName(user1)); // "JOHN"
console.log(getUserName(user2)); // "Guest"
// ✅ TypeScript forces you to handle null cases

3. Function Parameters

JavaScript: No parameter validation - functions accept any arguments, potentially causing runtime errors.

TypeScript: Parameters are validated at compile-time, ensuring functions are called correctly.

// JavaScript - No parameter validation
function sendEmail(recipient, subject, body) {
  // What if someone calls this wrong?
  console.log(`Sending to: ${recipient}`);
  return `Email sent!`;
}

// All these work but may cause bugs
sendEmail("user@example.com", "Hello");
sendEmail(123, null, undefined);
sendEmail(); // ❌ Runtime errors likely

// TypeScript - Parameter validation built-in
function sendEmail(
  recipient: string, 
  subject: string, 
  body: string
): string {
  console.log(`Sending to: ${recipient}`);
  return `Email sent!`;
}

// TypeScript prevents mistakes
sendEmail("user@example.com", "Hello"); // ❌ Error: Missing argument
sendEmail(123, null, undefined); // ❌ Error: Wrong types
sendEmail(); // ❌ Error: Missing all arguments

4. Code Documentation

JavaScript: Requires separate documentation or comments to explain function signatures and data structures.

TypeScript: Types serve as built-in documentation, making code self-explanatory.

// TypeScript - No documentation needed!
interface PaymentDetails {
  amount: number;
  currency: string;
  customerId: string;
  description?: string; // Optional field
}

function processPayment(details: PaymentDetails): Promise<boolean> {
  // Function signature tells you everything:
  // - Takes PaymentDetails object
  // - Returns a Promise of boolean
  // - description is optional
  return Promise.resolve(true);
}

// vs JavaScript - You need to read docs or code
function processPayment(details) {
  // What is details? What properties does it have?
  // What does this function return?
  // You have to guess or read documentation
  return Promise.resolve(true);
}

5. IDE Support

JavaScript: Limited autocomplete and IntelliSense—your editor can only guess what properties and methods exist.

TypeScript: Excellent autocomplete, instant error highlighting, and intelligent refactoring—your editor knows exactly what's available.

6. Refactoring Safety

JavaScript: Refactoring is risky—renaming a property might break code elsewhere without warning.

TypeScript: Refactoring is safe—the compiler shows you every location that needs updating when you change something.

7. Null and Undefined Handling

JavaScript: Null and undefined bugs are common and only caught at runtime.

TypeScript: With strict null checks enabled, TypeScript forces you to handle null/undefined cases explicitly.

// TypeScript forces null handling
function getLength(text: string | null): number {
  // TypeScript error if you don't check for null!
  if (text === null) {
    return 0;
  }
  return text.length; // Safe now
}

// JavaScript - No protection
function getLength(text) {
  return text.length; // Crashes if text is null!
}

8. Object Structure Enforcement

JavaScript: Objects can have any properties, leading to typos and structural bugs.

TypeScript: Interfaces and types define exact object shapes, preventing structural errors.

// JavaScript - Object structure unknown
function processOrder(order) {
  // What properties does order have?
  // We have to guess or check docs
  const total = order.items.reduce(
    (sum, item) => sum + item.price * item.qty, 0
  );
  return total;
}

// These might work or crash
processOrder({ items: [] }); // Might work
processOrder({ products: [] }); // ❌ Crash!
processOrder(null); // ❌ Crash!

// TypeScript - Clear object structure
interface OrderItem {
  name: string;
  price: number;
  qty: number;
}

interface Order {
  items: OrderItem[];
}

function processOrder(order: Order): number {
  const total = order.items.reduce(
    (sum, item) => sum + item.price * item.qty, 0
  );
  return total;
}

// TypeScript enforces correct structure
processOrder({ products: [] }); // ❌ Error: Wrong property
processOrder(null); // ❌ Error: Null not assignable

9. Array Type Safety

JavaScript: Arrays can contain mixed types, potentially causing unexpected behavior.

TypeScript: Array types are enforced, ensuring consistent data.

// JavaScript - Array contents unknown
const numbers = [1, 2, 3, 4, 5];

// This works fine
numbers.push(6);

// This also "works" but causes bugs
numbers.push("seven");
numbers.push(true);
numbers.push({ value: 8 });

// Later code expects numbers
const sum = numbers.reduce((a, b) => a + b);
// ❌ Unexpected results or crashes

// TypeScript - Array type enforcement
const numbers: number[] = [1, 2, 3, 4, 5];

// This works fine
numbers.push(6);

// TypeScript prevents type mixing
numbers.push("seven"); // ❌ Error: Type 'string' not assignable
numbers.push(true); // ❌ Error: Type 'boolean' not assignable
numbers.push({ value: 8 }); // ❌ Error: Type 'object' not assignable

// Arrays stay type-safe
const sum = numbers.reduce((a, b) => a + b); // ✅ Always works

What They Have in Common

Despite their differences, TypeScript and JavaScript share fundamental characteristics:

• Same Syntax: TypeScript uses JavaScript syntax with type annotations added
• Same Runtime: Both run in browsers and Node.js environments
• Same Features: All JavaScript features work in TypeScript (ES6+, async/await, etc.)
• Same Ecosystem: TypeScript can use all JavaScript libraries and tools
• Same Output: TypeScript compiles to JavaScript for execution

Test Your Understanding

Let's check if you understand the key difference between JavaScript and TypeScript:

let age: number = 25;
let name: string = "John";

// Which line has an error?
age = 30;              // Line 1
name = age.toString(); // Line 2
age = "thirty";        // Line 3
name = name + " Doe";  // Line 4

When to Use JavaScript vs TypeScript

Use JavaScript When:

• Building small scripts or one-off utilities (less than 100 lines)
• Creating quick prototypes where type safety isn't critical
• Working on legacy projects without TypeScript setup
• Learning programming fundamentals for the first time
• Contributing to JavaScript-only open source projects that don't use TypeScript

Use TypeScript When:

• Building applications with multiple developers (team collaboration)
• Creating projects that will be maintained long-term (months or years)
• Working with complex data structures or business logic
• Building APIs or libraries that others will use
• Developing applications where bugs are costly (fintech, healthcare, e-commerce)
• Using frameworks that encourage TypeScript (Angular, Next.js, NestJS)
• Want better IDE support and refactoring capabilities

Can You Switch Between Them?

One of TypeScript's biggest advantages is the easy migration path:

JavaScript → TypeScript (Easy!)

• Rename files from .js to .ts
• Start adding types gradually, file by file
• Existing JavaScript code continues working
• Add types where they provide the most value first
• Complete migration at your own pace (days, weeks, or months)

TypeScript → JavaScript (Automatic!)

• TypeScript compiler removes all types automatically
• Generated JavaScript is clean and readable
• You can target different JavaScript versions (ES5, ES6, ES2020, etc.)
• The compiled code runs anywhere JavaScript runs

// Start with JavaScript
function calculateTotal(price, tax) {
  return price + (price * tax);
}

// Add types gradually
function calculateTotal(price: number, tax: number) {
  return price + (price * tax);
}

// Add return type for completeness
function calculateTotal(price: number, tax: number): number {
  return price + (price * tax);
}

// TypeScript compiles to clean JavaScript
// Output: Same code without type annotations!

Performance Comparison

A common question: Does TypeScript affect runtime performance?

Ecosystem and Community

JavaScript

• Age: Created in 1995, 30+ years of ecosystem growth
• Libraries: Millions of npm packages
• Community: Largest developer community worldwide
• Resources: Unlimited tutorials, courses, and documentation

TypeScript

• Age: Created in 2012, rapidly growing
• Libraries: Can use all JavaScript libraries, plus type definitions
• Community: Fast-growing, used by major tech companies
• Resources: Growing library of TypeScript-specific content

Learning Curve

How long does it take to learn each?

Job Market Perspective

For developers locally and globally, both languages are valuable:

JavaScript Jobs

• Entry-level positions often require JavaScript
• Frontend, backend, and full-stack roles
• Wide variety of opportunities
• Essential baseline skill

TypeScript Jobs

• Mid-level to senior positions increasingly require TypeScript
• Higher salaries on average (10-20% premium)
• Remote international opportunities
• Preferred for enterprise and fintech roles

Key Takeaways

What's Next?

Now that you understand the differences between JavaScript and TypeScript, you're ready to set up your development environment! In the next lesson, we'll cover Setting Up TypeScript—installing TypeScript, configuring your project, and preparing your editor for the best TypeScript experience.

Get ready to write your first TypeScript code and experience the benefits firsthand!