TypeScript for JavaScript Developers: What Actually Changes

TypeScript doesn't make JavaScript harder. It makes JavaScript with large codebases easier — by failing loudly at compile time rather than silently at runtime. Here's what actually changes when you make the switch.

What TypeScript Actually Does

Adds a type-checking step between writing code and running it. Types are erased at runtime — your compiled JavaScript output is normal JS. TypeScript only exists during development. The browser never sees any of it.

The Bugs TypeScript Catches

Typos in property names: user.naem instead of user.name. In JavaScript, this silently returns undefined and breaks somewhere downstream. TypeScript: error on the spot.

Calling functions with wrong argument types: formatDate(12345) when formatDate expects a string. TypeScript catches this before you run the code.

Missing null checks: user.profile.email when user.profile might be null. TypeScript forces you to handle the null case explicitly.

Incorrect function return types: a function that should return a User sometimes returning undefined. TypeScript makes the discrepancy obvious.

The Basics You Need Immediately

const name: string = 'Alice';
const age: number = 30;
const active: boolean = true;

interface User {
  id: number;
  name: string;
  email: string;
  role?: string; // optional
}

const ids: number[] = [1, 2, 3];
const users: User[] = [];

function greet(name: string): string {
  return `Hello, ${name}`;
}

const add = (a: number, b: number): number => a + b;

Union Types: The Actually Useful Concept

type Status = 'pending' | 'active' | 'cancelled' means Status can only be one of those three strings. TypeScript will error if you try to assign any other string. This replaces string enums, magic strings, and entire categories of validation code.

Common Mistakes When Starting

• Using any everywhere: You're just writing JavaScript with extra steps. Use unknown for external data, or let TypeScript infer.
• Over-annotating: Don't write const x: string = 'hello' — TypeScript already knows. Save annotations for function signatures.
• Ignoring strict mode: Enable strict: true in tsconfig.json from the start. It catches significantly more bugs. Turning it on in an existing codebase is painful; starting with it is easy.
• Fighting the type system with @ts-ignore: Sometimes necessary for third-party libraries, but if you're ignoring TypeScript on your own code regularly, something in the design is off.