JavaScript and TypeScript roadmap

JavaScript is the language of the web browser and also runs on servers through Node.js (and similar runtimes like Deno and Bun). TypeScript is JavaScript with types added, which compiles to plain JavaScript. Together they let you build front end, back end and tools with one language family.

Stage 1: core JavaScript

Values and types: numbers, strings, booleans, null, undefined, objects, arrays.
Variables: use const by default, let when reassigning, avoid var.
Operators, template strings, and comparison. Prefer === over ==.
Conditions and loops: if, switch, for, for...of, while.
Functions: declarations, expressions, arrow functions, default and rest parameters.
Objects and arrays: properties, destructuring, spread, and array methods map, filter, reduce, find, some.
Truthy and falsy values, and how type conversion can surprise you.

const users = [{ name: "Ana", age: 31 }, { name: "Raj", age: 17 }];
const adultNames = users.filter(u => u.age >= 18).map(u => u.name);

Stage 2: how the language really works

Scope and closures.
this and how it depends on how a function is called.
Prototypes and classes.
Modules (import and export).
Error handling with try/catch.
Immutability habits: avoid changing objects you did not create.

Stage 3: asynchronous JavaScript

Much of JavaScript is waiting: network requests, timers, files.

The event loop and why JavaScript is single-threaded but non-blocking.
Callbacks, then promises, then async/await.
fetch to call APIs, and handling errors and status codes.
Promise.all for running tasks in parallel.

async function getUser(id) {
  const res = await fetch("/api/users/" + id);
  if (!res.ok) throw new Error("Request failed: " + res.status);
  return res.json();
}

Stage 4: in the browser

The DOM: select, create and change elements.
Events and event delegation.
Forms and validation.
Browser storage and its limits (never store secrets there).
DevTools for debugging.
Build a few small interactive pages before using a framework.

Stage 5: Node.js on the server

Running scripts, using npm, reading package.json.
The file system, environment variables and command-line arguments.
Building an HTTP API with Express, Fastify or similar.
Connecting to a database, authentication and validation.
Understanding that blocking the event loop with heavy CPU work hurts every request.

Stage 6: TypeScript

Add TypeScript once you are comfortable with JavaScript.

Basic types: string, number, boolean, arrays, tuples.
Interfaces and type aliases, unions ("asc" | "desc"), optional properties.
Generics for reusable typed code.
Narrowing: the compiler understands checks like typeof x === "string".
Configure strict mode in tsconfig.json.
Avoid any. Use unknown and narrow it.

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

function greet(user: User): string {
  return "Hello, " + user.name;
}

Types exist only at compile time. They do not validate data arriving at runtime (such as API responses), so validate untrusted input with a schema library.

Stage 7: tooling and quality

Formatter and linter (Prettier, ESLint).
Bundlers and dev servers (Vite, esbuild).
Testing: Vitest or Jest for unit tests, Playwright or Cypress for end-to-end tests.
Git, CI and package management habits (lockfiles, auditing dependencies).

Stage 8: frameworks and full stack

Front end: React, Vue, Svelte or Angular. Pick one.
Full stack: Next.js, Nuxt, SvelteKit, Remix, Astro.
Back end: NestJS, Fastify, tRPC.
Databases: SQL with an ORM or query builder, and Redis.

Project ideas

Beginner: a quiz, a counter, a to-do list stored in the browser.
Intermediate: a weather or movie app using an API, a markdown notes tool.
Advanced: a full-stack app with login, a database, tests and deployment.

Common pitfalls

Using == and being surprised by type coercion.
Forgetting to await a promise, or not handling rejected promises.
Mutating shared objects accidentally.
Floating-point maths such as 0.1 + 0.2.
Trusting data from the client or an API without validation.
Adding many dependencies without checking them. Packages are a supply-chain risk, so keep them few and updated.

Takeaway: learn JavaScript fundamentals and async code first, practise in the browser and Node.js, then add TypeScript with strict mode. Build and deploy small projects, and validate all external data.

Programming roadmaps series, Part 2 (languages and design): 2 of 5. Previous: Python learning roadmap: from basics to real projects.

JavaScript and TypeScript roadmap: from first script to full stack