A hands-on TypeScript learning path that grows from language fundamentals into typed frontend and backend applications. Each phase contains focused examples, practice code, and a project that combines the ideas covered so far.
| Phase | Focus | Status |
|---|---|---|
| Phase 1 | TypeScript fundamentals: annotations, inference, objects, interfaces, aliases, unions, and more | Available |
| Phase 2 | Intermediate and advanced types: generics, constraints, narrowing, literal types, enums, and discriminated unions | Available |
| Phase 3 | React with TypeScript: props, state, events, refs, context, custom hooks, and forwarded refs | Available |
| Phase 4 | TypeScript with Express: typed REST routes, middleware, error handling, and project structure | Available |
| Phase 5 | Future learning material | Planned |
| Phase 6 | Future learning material | Planned |
Phase1/ TypeScript fundamentals and small examples
Phase2/ Advanced type-system patterns and small examples
Phase3/ React + TypeScript examples and todo dashboard
Phase4/ Express + TypeScript examples and todo REST API
Phase5/ Planned material
Phase6/ Planned material
Most topic folders contain a .ts example and, where applicable, its compiled .js output. The main practice projects are:
- Todo dashboard: a React and Vite frontend.
- Todo API: an Express REST API backed by an in-memory store.
- Node.js and npm
- A code editor with TypeScript support, such as VS Code
- Basic JavaScript familiarity
- Start with Phase 1 if you are new to TypeScript.
- Read each phase README before opening its examples.
- Run the examples or projects, then change values and types to observe compiler feedback.
- Move to the next phase when the current concepts feel familiar.
The repository has no root-level npm project. Install dependencies from the practice project directory you want to run.
The Phase 3 practice project is a Vite application. From the project directory:
cd Phase3/PracticeProject/todo-dashboard
npm install
npm run devUseful checks for the project:
npm run build
npm run lintThe Phase 4 practice project is an Express application. From the API directory:
cd Phase4/type-todo-api
npm install
npm run devThe API listens on http://localhost:3000 by default. Build it with:
npm run buildBy working through this repository, you will build confidence in:
- writing safer JavaScript with TypeScript
- modeling data with precise and reusable types
- understanding how TypeScript narrows and checks values
- applying types to React components and application logic
- reading compiler errors and improving code through experimentation
This is a practice repository, so create additional examples, improve explanations, and record questions as you learn. Keep examples focused, preserve the existing folder structure, and place new material in the phase that best matches its difficulty.