Overview
What is By-Example?
By-example tutorials are a code-first learning path designed for experienced developers who want rapid language pickup through heavily annotated working code examples.
Target Audience: Seasonal programmers and software engineers who:
- Already know at least one programming language well
- Want quick TypeScript pickup without extensive narrative
- Prefer learning through working code
- Need 95% coverage efficiently
How This Tutorial Works
Code-First Approach: Show the code first, run it second, understand through direct interaction.
85 Heavily Annotated Examples: Each example uses // => notation to document values, states, outputs, and side effects at every significant line.
Five-Part Structure (per example):
- Brief Explanation (2-3 sentences): What this example demonstrates
- Mermaid Diagram (when appropriate): Visual concept representation
- Heavily Annotated Code: Self-contained, runnable example
- Key Takeaway (1-2 sentences): Core insight summary
- Why It Matters (50-100 words): Production relevance
Self-Contained Examples: Every example is copy-paste-runnable within its chapter scope. No external dependencies or references to previous examples.
95% Coverage: This tutorial covers 95% of TypeScript features needed for production work through three difficulty levels:
- Beginner (Examples 1-30): 0-40% coverage - Types, functions, interfaces, classes
- Intermediate (Examples 31-60): 40-75% coverage - Generics, utility types, decorators, async
- Advanced (Examples 61-85): 75-95% coverage - Advanced types, compiler API, optimization
What By-Example Is NOT
NOT a replacement for:
- Beginner tutorials (which provide deep explanations for complete beginners)
- Quick Start (which is 5-30% coverage touchpoints)
- Cookbook (which is problem-solving oriented, not learning-oriented)
TypeScript By-Example vs By-Concept
Two complementary learning paths:
| Path | Approach | Target Audience | Coverage |
|---|---|---|---|
| By-Example | Code-first, heavily annotated examples | Experienced developers | 95% through 85 examples |
| By-Concept | Narrative-driven, comprehensive explanations | Beginners to TypeScript | 95% through deep dives |
Choose By-Example if:
- You know JavaScript well and want rapid TypeScript pickup
- You prefer learning through working code
- You want comprehensive coverage quickly
Choose By-Concept if:
- You’re new to TypeScript or type systems
- You prefer detailed explanations and context
- You want deep understanding of design decisions
How to Use This Tutorial
Sequential Reading: Examples progress from fundamental syntax to expert mastery. Read in order for best results.
Copy-Paste-Run: Every example is self-contained. Copy code into a .ts file, compile with tsc filename.ts, run with node filename.js.
Annotation Focus: Pay attention to // => comments showing values, states, and outputs at each step.
Diagram Study: Complex examples include Mermaid diagrams visualizing data flow, state transitions, or memory layout.
Production Context: “Why It Matters” sections connect concepts to real-world production usage across different frameworks and applications.
Prerequisites
Required:
- Proficiency in at least one programming language
- Basic understanding of JavaScript
- Node.js and TypeScript installed (see Initial Setup)
Helpful but not required:
- Experience with object-oriented programming
- Familiarity with modern JavaScript (ES6+)
- Understanding of asynchronous programming
Next Steps
Start with Beginner Examples to learn TypeScript fundamentals through 30 annotated examples covering types, functions, interfaces, classes, and more.