TypeScript: complete course
Add reliable types to JavaScript, then move through generics, narrowing, architecture, tooling and full-stack TypeScript patterns. Every chapter ends with practical projects so you build while you learn.
1Why TypeScript exists~10 min
What you are learning
1 Why TypeScript exists ~10 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
let username: string = "Alex";
console.log(username);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
2Primitive and special types~12 min
What you are learning
2 Primitive and special types ~12 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
let id: string | number = 42;
const missing: null = null;
const unknownValue: unknown = "safe";Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
3Arrays, tuples and enums~14 min
What you are learning
3 Arrays, tuples and enums ~14 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const scores: number[] = [80, 90];
const pair: [string, number] = ["HTML", 17];
enum Level { Beginner, Advanced }Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
4Objects and type aliases~16 min
What you are learning
4 Objects and type aliases ~16 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
type Course = { title: string; chapters: number };
const course: Course = { title: "HTML", chapters: 17 };Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
5Functions in TypeScript~18 min
What you are learning
5 Functions in TypeScript ~18 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
function add(a: number, b: number): number { return a + b; }
console.log(add(2, 3));Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
6Narrowing and type guards~20 min
What you are learning
6 Narrowing and type guards ~20 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
function print(value: string | number) {
if (typeof value === "string") console.log(value.toUpperCase());
else console.log(value.toFixed(2));
}Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
7Interfaces and structural typing~22 min
What you are learning
7 Interfaces and structural typing ~22 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
interface User { id: number; name: string }
const user: User = { id: 1, name: "Sam" };Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
8Generics~24 min
What you are learning
8 Generics ~24 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
function first<T>(items: T[]): T { return items[0]; }
console.log(first([1, 2, 3]));Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
9Utility and mapped types~26 min
What you are learning
9 Utility and mapped types ~26 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
type User = { id: number; name: string; active: boolean };
type PublicUser = Pick<User, "id" | "name">;
const u: PublicUser = { id: 1, name: "Sam" };Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
10Classes and object-oriented TypeScript~28 min
What you are learning
10 Classes and object-oriented TypeScript ~28 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
class Course {
constructor(public title: string) {}
}
const c = new Course("HTML");Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
11Modules and project architecture~30 min
What you are learning
11 Modules and project architecture ~30 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
export type Course = { title: string };
export function createCourse(title: string): Course { return { title }; }Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
12Typing JavaScript and browser APIs~32 min
What you are learning
12 Typing JavaScript and browser APIs ~32 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
const button = document.querySelector("button");
button?.addEventListener("click", () => console.log("clicked"));Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
13Async TypeScript and API contracts~34 min
What you are learning
13 Async TypeScript and API contracts ~34 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
interface CourseResponse { courses: string[] }
async function load(): Promise<CourseResponse> {
const r = await fetch("/api/courses");
return r.json();
}Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
14Advanced type-system patterns~36 min
What you are learning
14 Advanced type-system patterns ~36 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
type RecordValue = { id: number };
function keys<T extends object>(obj: T): Array<keyof T> { return Object.keys(obj) as Array<keyof T>; }Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
15TypeScript with Node.js~38 min
What you are learning
15 TypeScript with Node.js ~38 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
// server-side TypeScript shape
import { createServer } from "node:http";
createServer((_, res) => res.end("OK")).listen(3000);Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
16Production TypeScript architecture~40 min
What you are learning
16 Production TypeScript architecture ~40 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
export interface ApiClient { get<T>(path: string): Promise<T> }
class Service { constructor(private api: ApiClient) {} }Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example
17Capstone: full-stack TypeScript~42 min
What you are learning
17 Capstone: full-stack TypeScript ~42 min is a core part of TYPESCRIPT. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.
How it works
Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.
Practical example
interface Course { id: number; title: string }
async function getCourse(id: number): Promise<Course> {
const r = await fetch(`/api/courses/${id}`);
return r.json();
}Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.
Projects
Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.
- Build a focused TYPESCRIPT mini-project
- Build a second project combining this chapter with earlier concepts
- Rebuild the project without copying the example