FreeCodingCourses
Roadmap
2–4 months
4 phases
~16 weeks

TypeScript Roadmap

TypeScript adds static types to JavaScript, catching bugs at compile time rather than in production. This roadmap maps the path from the core type system through advanced type patterns to shipping real TypeScript in React and Node. It's aimed at JavaScript developers who want stronger tooling, fewer runtime surprises, and better collaboration on larger codebases. Every phase points to free resources, and you finish with a shipped typed project. Plan on 2 to 4 months at around 10 hours a week.
Follow the learning path →All Roadmaps

  1. Phase 1:TypeScript Basics

    intermediate
    1 week

    Type Annotations

    Explicit types on variables, function parameters, and return values. The foundation the rest of the type system builds on.

    intermediate
    1 week

    Interfaces & Type Aliases

    Define the shape of objects. Use interface for object shapes you'll extend; use type for unions, intersections, and computed types.

    intermediate
    1 week

    Union & Intersection Types

    Union types (A | B) for values that can be one of several types; intersection types (A & B) for objects that must satisfy multiple constraints at once.

  2. Phase 2:Generics & Advanced Types

    intermediate
    2 weeks

    Generics

    Write functions and types that work across many types while preserving type information. The pattern behind most typed utility libraries.

    intermediate
    1 week

    Utility Types

    Partial, Required, Pick, Omit, Record, Readonly. TypeScript ships with a library of type transformers you'll use constantly in real codebases.

    intermediate
    1 week

    Discriminated Unions

    Model state machines and tagged variants cleanly. The pattern TypeScript developers use to eliminate impossible states.

  3. Phase 3:TypeScript in Practice

    intermediate
    2 weeks

    TypeScript with React

    Type component props, hooks, event handlers, and context. React with TypeScript is the default in most production frontend codebases.

    intermediate
    2 weeks

    TypeScript with Node.js

    Type Express routes, middleware, and database queries. Add Zod for runtime validation that keeps TypeScript honest at system boundaries.

    intermediate
    1 week

    tsconfig & Strict Mode

    Learn the key tsconfig.json settings and enable strict mode. Strict is non-negotiable in professional TypeScript work; it catches the most bugs.

  4. Phase 4:Portfolio Project

    intermediate
    3 weeks

    Project Scope

    Build a full-stack TypeScript app: a typed Node/Express API with a React frontend. Keep scope tight: one resource (notes, tasks, bookmarks) done well is better than a half-finished ambitious project.

    intermediate
    1 week

    Code Quality

    Enable strict mode and eslint-plugin-@typescript-eslint. Fix every red squiggle before calling it done. This is the bar senior developers expect from TypeScript code.

Next steps

Keep exploring

Languages in this roadmap

TypeScriptJavaScript

Follow the TypeScript learning path

The same plan step by step, with a specific free course for each stage.

Compare all 22 free platforms

See how the platforms behind these courses stack up side by side.

See all roadmaps

Browse every career roadmap we have mapped.

Other goals

More Roadmaps

Web DeveloperView →Frontend DeveloperView →Backend DeveloperView →PythonView →