Learning TypeScript

Why Learn TypeScript?

• Fewer runtime bugs: Static typing catches errors before deployment
• Great DX: IntelliSense, auto-complete, and refactors are first-class
• Modern web ready: Pairs perfectly with React, Next.js, and Node
• Scales with teams: Shared interfaces and contracts improve collaboration

TypeScript vs JavaScript

Your Learning Path

Follow this progression to master TypeScript. Each step builds on the previous one.

Interactive Lessons

Expand a lesson to learn. Try examples locally or in a TypeScript playground.

let count: number = 0;
const username: string = "alice";
let id: number | string = 42; // union

id = "guest-123"; // ok

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

function first(items: T[]): T | undefined {
  return items[0];
}

const n = first([1, 2, 3]);   // n: number | undefined
const s = first(["a", "b"]); // s: string | undefined

type User = {
  id: number;
  name: string;
  role?: "admin" | "editor" | "viewer"; // optional
};

interface Article {
  title: string;
  body: string;
  tags: string[];
}

function publish(user: User, article: Article) {
  if (user.role !== "admin") throw new Error("no access");
  // ...
}

interface Store {
  add(item: string): void;
  list(): string[];
}

class MemoryStore implements Store {
  #items: string[] = [];

  add(item: string) {
    this.#items.push(item);
  }

  list() {
    return [...this.#items];
  }
}

const store = new MemoryStore();
store.add("task");

type Todo = { id: number; title: string; completed: boolean };

async function fetchTodos(): Promise {
  const res = await fetch("/api/todos");
  if (!res.ok) throw new Error("request failed");
  return res.json();
}

fetchTodos().then(todos => {
  todos.filter(t => t.completed);
});

type ReadonlyDeep = {
  readonly [K in keyof T]: ReadonlyDeep;
};

type ApiResult = { ok: true; data: T } | { ok: false; error: string };

function result(value: T): ApiResult {
  return { ok: true, data: value };
}

Practice Projects

Build real skills with progressive projects:

• 1. Typed Todo API
  2-3 hoursBeginner

  Create a small Node API with Express + TypeScript. Add DTO types, Zod validation, and typed responses.

  Key Concepts: Express, ts-node, Zod, DTOs
• 2. React + TypeScript Form
  3-4 hoursBeginner

  Build a form with controlled inputs, useState types, and a typed submit handler.

  Key Concepts: JSX typing, event types, discriminated unions
• 3. Typed Fetch Wrapper
  4-5 hoursIntermediate

  Create a fetch helper that enforces response shapes with generics and narrowing.

  Key Concepts: Generics, async/await, error typing
• 4. Next.js Notes App
  6-8 hoursIntermediate

  Implement a notes app with Next.js, server actions, and typed API routes.

  Key Concepts: Next.js, server/client components, tRPC or REST types
• 5. Full-Stack Starter
  8-12 hoursAdvanced

  Scaffold a full-stack app with Vite, React, Prisma, and strict TypeScript settings.

  Key Concepts: tsconfig tuning, linting, strict mode, Prisma types

Resources Hub

Your Progress

Check off lessons as you complete them. Your progress is saved locally in your browser.