This guide helps you run and demonstrate TypeScript code examples to students.

Quick Start

  1. Install dependencies: bash npm install

  2. Run demo files (choose one method):

Option A: Using npm scripts (easiest) bash npm run run:intro # Introduction demo npm run run:basic-types # Basic types demo

Option B: Using npx (for any file) bash npx ts-node src/01-beginner/01-introduction.ts npx ts-node src/01-beginner/02-basic-types.ts

Note: If you get "command not found: ts-node", always use npx ts-node instead of just ts-node

  1. Compile TypeScript: bash npm run build

  2. Run compiled JavaScript: bash npm run start

  3. Run in watch mode (for development): bash npm run watch

Demo Files Structure

Beginner Level (src/01-beginner/)

  • 01-introduction.ts - Basic TypeScript concepts
  • 02-basic-types.ts - Primitive and special types
  • 03-variables.ts - Variable declarations and type annotations
  • 04-functions.ts - Function types, overloads, and parameters
  • 05-interfaces.ts - Interface definitions and extensions
  • 06-classes.ts - Classes, inheritance, and access modifiers
  • 07-arrays-tuples.ts - Arrays and tuple types
  • 08-enums.ts - Enum types
  • 09-type-assertions.ts - Type assertions and narrowing
  • 10-union-intersection.ts - Union and intersection types

Intermediate Level (src/02-intermediate/)

  • 01-generics.ts - Generic functions, classes, and constraints
  • 02-utility-types.ts - Built-in utility types (Partial, Pick, Omit, etc.)
  • 03-advanced-types.ts - Advanced type patterns
  • 04-modules-namespaces.ts - ES6 modules and namespaces
  • 05-decorators.ts - Decorators (requires experimentalDecorators)
  • 06-type-guards.ts - Type guards and narrowing
  • 10-error-handling.ts - Error handling patterns

Advanced Level (src/03-advanced/)

  • 01-advanced-generics.ts - Complex generic patterns
  • 04-template-literal-types.ts - Template literal types
  • 10-branded-types.ts - Branded and opaque types

Running Individual Examples

You can run individual files using npx ts-node (note: use npx since ts-node is installed locally):

# Method 1: Using npx (recommended)
npx ts-node src/01-beginner/01-introduction.ts
npx ts-node src/01-beginner/02-basic-types.ts
npx ts-node src/02-intermediate/01-generics.ts
npx ts-node src/03-advanced/01-advanced-generics.ts

# Method 2: Using npm scripts (if available)
npm run run:intro
npm run run:basic-types

# Note: If you get "command not found: ts-node", use npx ts-node instead

Complete Demo

Run the complete demo that showcases all concepts:

npx ts-node src/demo.ts

Teaching Tips

  1. Start with basics - Begin with 01-introduction.ts to show TypeScript vs JavaScript
  2. Show type errors - Uncomment error lines to demonstrate compile-time checking
  3. Use the REPL - Use ts-node in interactive mode for live coding
  4. Compare with JavaScript - Show how TypeScript prevents common JavaScript errors
  5. Progressive complexity - Build from simple types to advanced patterns

Common Demo Scenarios

Scenario 1: Type Safety

// Show this in 01-introduction.ts
function add(a: number, b: number): number {
  return a + b;
}

// Uncomment to show error:
// add(5, "10"); // Error!

Scenario 2: Type Inference

// Show in 02-basic-types.ts
let count = 42; // TypeScript knows it's a number
// count = "hello"; // Error!

Scenario 3: Generics

// Show in 02-intermediate/01-generics.ts
function identity<T>(arg: T): T {
  return arg;
}

// Show type inference
identity("hello"); // TypeScript infers string
identity(42);      // TypeScript infers number

Troubleshooting

Decorators not working?

Make sure experimentalDecorators is enabled in tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Module resolution issues?

Check that tsconfig.json has proper module resolution:

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

Next Steps

After running demos, students can: 1. Modify the examples 2. Try the exercises from the markdown files 3. Build their own projects 4. Explore the TypeScript Playground online