JavaScript vs TypeScript

Real-world analogy

What is it?

TypeScript is a superset of JavaScript created by Microsoft. It adds static type checking — you declare what type of data each variable, parameter, and return value should be (string, number, boolean, etc.) and the compiler verifies you use them correctly. You also get interfaces to define object shapes, optional properties with ?, and much better editor autocomplete.

Real-world relevance

Almost every major company uses TypeScript now: Airbnb, Slack, Stripe, and more. NestJS is built entirely in TypeScript, and React has first-class TypeScript support.

Key points

• TypeScript = JS + Types — TypeScript is JavaScript with type annotations added on top. You tell the compiler 'this variable is a string' or 'this function returns a number' — and it checks your work. Every valid JS code is also valid TS code!
• Type Annotations — You write types after a colon — like name: string or age: number. This tells TypeScript exactly what kind of data is allowed, so it can warn you if you use the wrong type.
• Interfaces — Shape Contracts — An interface defines the shape of an object — what properties it has and what types they are. Think of it as a blueprint: interface User { name: string; age: number; }. Now TypeScript knows exactly what a User looks like!
• Optional Properties with ? — Add a ? after a property name to make it optional: email?: string means 'email can be a string OR it can be left out entirely'. No ? means the property is required — you MUST provide it.
• Catches Bugs Early — Instead of finding errors at 3 AM in production, TypeScript finds them while you're coding. Pass a number where a string is expected? TypeScript tells you immediately. Studies show TypeScript prevents about 15% of bugs that would otherwise make it to production.
• Compiles to JavaScript — Browsers don't understand TypeScript directly. Your .ts files get compiled (translated) into regular .js files before running. The types are stripped away — they're only there to help YOU during development.
• Editor Autocomplete & IntelliSense — TypeScript supercharges your code editor with intelligent autocompletion. When you type 'user.' your editor shows every available property and method with their types. This means less time reading documentation and fewer typos — your editor becomes a knowledgeable coding partner that knows your entire codebase.
• Enums — Named Constants — Enums let you define a set of named constants: enum Status { Active, Inactive, Pending }. Instead of using magic strings like 'active' scattered through your code, you use Status.Active — readable, refactorable, and your editor catches typos instantly. Enums make your code self-documenting.

Code example

// JavaScript — no types, YOLO mode 🎲
function greet(name) {
  return "Hello " + name.toUpperCase();
}
greet(42); // 💥 Runtime error! 42.toUpperCase is not a function

// TypeScript — safe mode 🛡️
function greet(name: string): string {
  return "Hello " + name.toUpperCase();
}
greet(42); // ❌ Compile error! Argument of type 'number'
           //    is not assignable to parameter of type 'string'
greet("World"); // ✅ "Hello WORLD"

// TypeScript interfaces — like a contract 📝
interface User {
  name: string;
  age: number;
  email?: string; // optional (the ? means it's OK to skip)
}

const user: User = {
  name: "Alex",
  age: 25,
  // email is optional, so this is fine!
};

Line-by-line walkthrough

1. 1. A comment-only line introducing JavaScript without types
2. 2. Declaring a function called 'greet' that takes a name with no type checking
3. 3. Returns 'Hello ' followed by the name converted to ALL CAPS
4. 4. Closing the function
5. 5. Calling greet with the number 42 - crashes at runtime because numbers don't have toUpperCase!
6. 6.
7. 7. Now the same function in TypeScript with type safety
8. 8. Declaring greet with 'name: string' type annotation and ': string' return type
9. 9. Same logic - returns 'Hello ' plus uppercased name
10. 10. Closing the function
11. 11. TypeScript catches this at compile time! Can't pass a number where string is expected
12. 12. TypeScript's error message explaining the type mismatch
13. 13. This works because 'World' IS a string - returns 'Hello WORLD'
14. 14.
15. 15. Comment introducing TypeScript interfaces
16. 16. Opening the User interface definition
17. 17. name must be a string - required
18. 18. age must be a number - required
19. 19. email is optional (the ? makes it OK to skip) - if given must be string
20. 20. Closing the interface
21. 21.
22. 22. Creating a 'user' variable typed as User
23. 23. Opening the object literal
24. 24. Setting name to 'Alex' - satisfies string requirement
25. 25. Setting age to 25 - satisfies number requirement
26. 26. Comment: email is optional so skipping is fine!

Spot the bug

function greet(name: string): string {
  return "Hello " + name.toUpperCase();
}
const result: number = greet("World");

Explain like I'm 5

Fun fact

Hands-on challenge

More resources

• TypeScript Handbook (TypeScript Official)
• TypeScript in 100 Seconds (Fireship)
• TypeScript for JavaScript Programmers (TypeScript Official)