TypeScript for JavaScript Developers: Your 5-Minute Crash Course

If you write JavaScript, you've probably heard the hype around TypeScript. The good news? TypeScript is JavaScript—with a smart type system layered on top. All your existing JS code works perfectly in TypeScript. The magic happens when TypeScript catches bugs before they reach production.

This guide walks you through TypeScript basics, focusing on its type system that makes your code more reliable and your editor smarter.

TypeScript = JavaScript + Types

JavaScript lets you mix types freely:

let value = "Hello";  // string
value = 42;           // Now a number? No problem!

TypeScript flags these inconsistencies:

let value: string = "Hello";
value = 42;  // ❌ Error: Type 'number' is not assignable to type 'string'

Key benefit: Your JS code runs unchanged, but TypeScript gives you early warnings about potential bugs.

Types by Inference (The Easy Way)

TypeScript is smart—it guesses types from your code without extra typing.

let helloWorld = "Hello World";
// TypeScript infers: let helloWorld: string
console.log(helloWorld.toUpperCase()); // ✅ Autocomplete works!

This powers VS Code's JavaScript IntelliSense. No config needed—TypeScript understands JS deeply.

Defining Types Explicitly (When Needed)

For complex objects or dynamic patterns, explicitly declare types using interface:

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

const user: User = {
  name: "Hayes",
  id: 0
};

What happens if you mess up?

const wrongUser: User = {
  username: "Hayes",  // ❌ Error: 'username' does not exist in type 'User'
  id: 0
};

TypeScript catches these at edit-time, not runtime.

Types Work Everywhere

With Classes

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

class UserAccount {
  name: string;
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

const user: User = new UserAccount("Murphy", 1);  // ✅ Matches interface

With Functions

function deleteUser(user: User) {
  console.log(`Deleting ${user.name}`);
}

function getAdminUser(): User {
  return { name: "Admin", id: 1 };
}

Built-in Primitive Types

TypeScript adds safety to JS primitives:

• string, number, boolean, bigint, null, undefined, symbol

• Bonus: any (anything goes), unknown (prove what it is), never (impossible), void

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

Composing Complex Types

Unions: "This OR That"

type WindowStates = "open" | "closed" | "minimized";

let windowState: WindowStates = "open";  // ✅
windowState = "maximized";  // ❌ Not in union

Practical example—handle multiple input types:

function getLength(input: string | string[]) {
  if (typeof input === "string") {
    return input.length;
  }
  return input.length;
}

Generics: Types with Variables

Arrays are generics in disguise:

type StringArray = Array<string>;
type NumberArray = Array<number>;

Build reusable components:

interface Backpack<ItemType> {
  add: (item: ItemType) => void;
  get: () => ItemType;
}

declare const backpack: Backpack<string>;
const item = backpack.get();     // ✅ TypeScript knows it's string
backpack.add(42);                // ❌ Error: number ≠ string

Structural Typing (Duck Typing on Steroids)

TypeScript cares about shape, not names. If it walks like a duck and quacks like a duck...

interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const point = { x: 12, y: 26 };
logPoint(point);  // ✅ Works! Same shape

const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect);   // ✅ Still works (ignores extra props)

const color = { hex: "#187ABF" };
logPoint(color);  // ❌ Missing x, y

Classes work too:

class VirtualPoint {
  constructor(public x: number, public y: number) {}
}

logPoint(new VirtualPoint(13, 56));  // ✅ Perfect match

Interface vs Type: Quick Rule

• Use interface for object shapes (most cases)

• Use type for unions, primitives, or complex intersections

// Good
interface User { name: string; id: number; }

// Also good (unions)
type Status = "active" | "inactive";

Why JavaScript Devs Love TypeScript

1. Gradual adoption—rename .js to .ts, get benefits immediately

2. Better refactoring—VS Code understands your entire codebase

3. Team scale—catches bugs in large codebases

4. Framework friendly—React, Angular, Vue all love TypeScript

Start today: Install TypeScript globally (npm i -g typescript), rename a JS file to .ts, and watch the magic. Your future self will thank you.