TypeScript Masterclass

Part of our "Web and Mobile" courses

2 days

TypeScript
Outline Last updated:

Course Overview

Master TypeScript beyond the annotations, from the type system's structural foundations through to conditional types, mapped types and the type-level techniques that make a library's API impossible to misuse. This course treats types as a language in their own right, because that is what they have become.

You will model real domains with discriminated unions and mutually exclusive fields, derive types rather than repeat them, and understand exactly what the compiler is inferring and why.

Who should attend

JavaScript developers adopting TypeScript who want to do it properly rather than annotate their way around the compiler, and existing TypeScript developers who can write an interface but stall the moment a type needs to be derived from another. It suits teams building shared libraries or design systems, where the types are part of the public API.

What you'll learn

  • Understand structural typing and what the compiler actually infers
  • Model domains with discriminated unions, exhaustiveness checking and mutually exclusive fields
  • Derive types instead of duplicating them, with keyof, mapped types and conditional types
  • Use the utility types fluently, and write your own when none of them fits
  • Apply template literal types and type-level narrowing to make invalid states unrepresentable
  • Configure the compiler and tooling for a real project rather than a tutorial

Course Prerequisites

This course is geared towards developers needing real command of TypeScript, not just its syntax. Developers should be familiar with JavaScript. We recommend students following the Modern JavaScript/ECMAScript Masterclass course prior to this one.

Outline

TypeScript is usually adopted as a safety net and then used as a formality: annotate the parameters, declare an interface, reach for any when the compiler complains. That version of TypeScript catches typos. The version this course teaches catches design errors, by making the states your code must never reach impossible to express.

The first day covers the language properly: structural typing, inference, narrowing, generics and the compiler configuration a real project needs. The second day is spent at the type level, deriving types from other types with conditional and mapped types, modelling mutually exclusive fields, and building APIs that guide the caller rather than merely tolerate them.

Introduction

  • Introduce TypeScript: what it adds, and what it deliberately does not
  • Appreciate why a structural type system suits JavaScript, and how it differs from nominal typing
  • Understand TypeScript's relationship with JavaScript and the erasure model
  • Set up a TypeScript project with Vite and tsc
  • Configure the compiler with tsconfig.json
  • Understand strict mode and each flag it turns on
  • Configure module resolution for the runtime you actually target
  • Use path aliases for cleaner imports
  • Use ESLint with the TypeScript parser
  • Consume and publish type declarations, and understand DefinitelyTyped

Type Annotations

  • Understand the type system and its role in catching errors early
  • Distinguish inference from annotation, and prefer inference where it reads better
  • Handle null and undefined safely with strictNullChecks and optional chaining
  • Contrast any and unknown, and understand why any is contagious
  • Use type aliases for reusable types
  • Compare enums with union types of literals, and discuss which to prefer
  • Work with arrays and their type annotations
  • Use tuples, including named and variadic forms
  • Explore union and intersection types
  • Use literal types and as const to narrow values
  • Understand excess property checking and when it does not apply

Functions

  • Define and use functions with type annotations
  • Work with parameters: optional, default and rest
  • Explore function overloads, and their limitations
  • Use type guards: typeof, instanceof, in and custom predicates
  • Write type predicates (x is T) and understand what you are promising
  • Narrow with assertion functions
  • Define return type annotations deliberately
  • Create function types for variables and callbacks
  • Explore the satisfies operator for precise inference without widening
  • Handle this context with typed annotations
  • Define generic functions for reusable, type-safe logic
  • Constrain generics with extends and provide defaults
  • Use const type parameters to preserve literal inference
  • Type asynchronous functions and their Promise results

Interfaces and Object Types

  • Define interfaces to describe object shapes
  • Compare interfaces with type aliases and choose deliberately
  • Use duck typing to enforce structural compatibility
  • Define properties, including optional and readonly
  • Create index signatures for dynamic property names
  • Extend types with inheritance and composition
  • Understand declaration merging, and when it is a feature rather than a surprise
  • Explore keyof to extract the keys of a type
  • Use Record to map keys to a value type
  • Model recursive structures such as JSON

Classes

  • Write classes and understand their role in a structural system
  • Define properties and methods
  • Use access modifiers, and contrast them with JavaScript's private fields
  • Use parameter properties to simplify construction
  • Implement inheritance and mark intent with override
  • Create abstract classes and methods
  • Write accessors for controlled property access
  • Define static members
  • Implement interfaces as contracts for classes
  • Apply generics to classes
  • Use the Stage 3 decorators, and distinguish them from the legacy experimental ones

Modelling with Types

  • Model alternatives with discriminated unions
  • Narrow a union by its discriminant and let the compiler do the work
  • Use never to prove exhaustiveness, so a new case breaks the build
  • Express mutually exclusive fields, where one property's presence forbids another
  • Build XOR types and understand what makes them awkward in a structural system
  • Apply branded types for nominal typing where structure is not enough
  • Discuss variance, and why a type that seems assignable sometimes is not
  • Make invalid states unrepresentable, and appreciate what that buys you

Type-level Programming

  • Use the built-in utility types: Partial, Required, Readonly, Pick, Omit, Record, Exclude, Extract, NonNullable and Awaited
  • Derive function types with Parameters, ReturnType and ConstructorParameters
  • Write mapped types to transform every member of a type
  • Add and remove modifiers with mapping modifiers (+/-, readonly, ?)
  • Remap keys with the as clause in a mapped type
  • Write conditional types (T extends U ? X : Y)
  • Extract inner types with infer
  • Understand distributive conditional types, and how to switch the behaviour off
  • Compose template literal types with the intrinsic string types
  • Build recursive types, and respect the compiler's depth limits
  • Extend the standard set with libraries such as ts-essentials
  • Discuss when a clever type is the wrong answer, and a simpler one serves the reader better

Frequently asked questions

How is this different from picking TypeScript up on the job?

Most developers who learn TypeScript on the job stop at annotations: they can type a function and declare an interface, and everything past that becomes a fight with the compiler. The second day of this course is entirely about the type level, which is where TypeScript stops being paperwork and starts preventing bugs.

Do I need to know JavaScript first?

Yes, properly. TypeScript adds a type system to JavaScript; it does not replace learning the language. If your team is new to modern JavaScript, take Modern JavaScript/ECMAScript Masterclass first.

Is this tied to a framework?

No. Everything is taught against plain TypeScript, which is what makes it transfer. The techniques apply equally in React, Angular, Node services and library code, and we discuss where each framework's own type conventions come from.

Which TypeScript version do you teach?

The current release, including satisfies, const type parameters and the Stage 3 decorators that replaced the experimental ones. Where a feature changed meaningfully we say so, since most teams have some older code to live with.

How hands-on is the course?

Lab work runs through both days. The second day in particular is exercise-led, because type-level programming is learnt by writing types that fail to compile and understanding why.

Do I need to install anything on my laptop?

No. Every student gets their own pre-configured cloud machine with Node and the tooling already in place, so all you need locally is an SSH client (already present on Linux, macOS and Windows). Work in the editors installed on the machine (vim, LazyVim, Emacs) or connect your own with VS Code Remote Development or IntelliJ's SSH remote development. Login details are emailed a week before the course.

How long is the TypeScript Masterclass course?

2 days, on-site or online. Sessions can run on consecutive days or be spread out to fit your team's schedule.

What are the prerequisites?

This course is geared towards developers needing real command of TypeScript, not just its syntax. Developers should be familiar with JavaScript. We recommend students following the Modern JavaScript/ECMAScript Masterclass course prior to this one.

How large are the groups?

Deliberately small so the trainer can adapt to every participant: at most 10 on-site and 7 online.

In which languages can the course be delivered?

English or French.

This TypeScript Masterclass course looks very interesting, I do however have a question

Related courses