TypeScript Tutorial with Examples.
TypeScript tutorial with examples: static typing for JavaScript, from annotations and interfaces to generics, utility types and advanced type patterns.
Beginner
Start here — no prior experience needed
Introduction to TypeScript
Understand what TypeScript is, why it exists, how it differs from JavaScript, and where it fits in the modern web ecosystem.
Setting Up TypeScript
Install TypeScript 7, read what tsc --init generates, run .ts files with Node's type stripping or tsx, and type-check them with tsc --noEmit.
Basic Types in TypeScript
TypeScript's built-in types — primitives, null, any vs unknown, void, never, arrays and tuples — each shown with real tsc errors and runtime output.
Variables in TypeScript
let and const, type annotations, inference, literal widening, as const, and the strict-mode checks — each shown with real tsc and tsx output.
Functions in TypeScript
Typed parameters and returns, optional, default and rest parameters, overloads, generics and this — each shown with real tsc errors and tsx output.
Interfaces in TypeScript
Describe object shapes with interfaces: optional and readonly properties, methods, extends, index signatures, merging and implements, with real tsc output.
Intermediate
For developers with core concepts down
Type Aliases in TypeScript
The type keyword: unions, intersections, discriminated unions, mapped, conditional, template literal and recursive types — with real tsc and tsx output.
Classes in TypeScript
Access modifiers, private vs #private, parameter properties, getters, abstract classes, statics and implements — shown with real tsc errors and tsx output.
Generics in TypeScript
Generic functions, classes, constraints, defaults, distributive conditional types and infer — each shown with real tsc errors and tsx output.
Utility Types in TypeScript
Partial, Required, Readonly, Pick, Omit, Record, Exclude, NonNullable, ReturnType, Parameters and Awaited, each shown with real tsc errors and tsx output.
Modules and Declaration Files in TypeScript
ES modules under nodenext, import type, barrels, .d.ts files for untyped JS, @types, globals, path aliases and project references, with real output.
Error Handling in TypeScript
unknown catch variables, type guards, assertion functions, Result types, exhaustive checks and custom errors with cause — with real tsc and tsx output.
Async TypeScript
Promises, a typed fetch wrapper, unknown errors, Promise.all/allSettled/race, AbortSignal, async generators and a concurrency queue — with real output.
Testing TypeScript
Test TypeScript with Vitest: typed fixtures, vi.mock and vi.mocked, spies, fake timers, expectTypeOf type tests, and Jest with ts-jest — with real runs.
Design Patterns in TypeScript
Singleton, Factory, a typed registry, a type-state Builder, Strategy and Observer in TypeScript, each run with real tsc errors and tsx output.
React with TypeScript
Type React 19 props, children, hooks, events, context and generic components, verified with real tsc errors and server-rendered output from tsx.
Node.js with TypeScript
Build a typed Express 5 API: tsconfig for Node, validated env config, typed routes and middleware, async errors and Zod validation, with real curl output.
TypeScript Interview Prep
30 TypeScript interview questions on types, generics, narrowing, utility, conditional and mapped types, each answered with real tsc and tsx output.
Advanced
Production-grade patterns for experienced engineers
Advanced Types in TypeScript
Template literal types, recursive DeepPartial, variance and in/out, satisfies, variadic tuples and key remapping — each shown with real tsc and tsx output.
Decorators in TypeScript
Standard TC39 decorators for methods, classes, accessors and fields, then legacy experimentalDecorators with metadata-driven DI — all with real output.
TypeScript Performance
Speed up tsc with TypeScript 7, incremental builds, Project References and skipLibCheck, and profile slow type checks, all measured on real runs.
Also part of TypeScript
Taught in other topics. Each link opens the lesson in its home topic.
JavaScript Event Loop Explained
Understand how JavaScript's single-threaded event loop works, why microtasks run before macrotasks, and how to reason about async execution order.
JavaScript Modules: ESM and CommonJS
Understand ES modules and CommonJS, their syntax differences, dynamic imports for code splitting, and how bundlers like Vite and webpack fit in.