Checkpoint: Applied TypeScript

Reviewed & published by Brayan K

This checkpoint consolidates the applied half of the course — declaration merging, namespaces, ambient types, async types, DOM types, generic defaults, function types, variadic tuples, advanced utilities, decorators, and migration — into one build challenge and a quiz.

Part of the free TypeScript course at LearnCodingFast — hands-on lessons with worked examples and the output they print, plus practice exercises and a quick quiz.

What You'll Consolidate

• Merging, namespaces & ambient declarations / @types
• Promise<T>, async/await, Awaited<T> & Promise.all
• DOM element and Event type handling
• Generic defaults, inference & const type parameters
• Function types, this, Parameters & ReturnType
• Variadic tuples, advanced utilities, decorators & migration

1. Recap: The Applied Toolkit

Here's the whole applied half on one page. Each idea below earned its own lesson; together they're what you reach for when typing real code.

• 🧩 Declaration merging — same-name interfaces combine; declare global augments Window/Express.
• 🗂️ Namespaces — group code under one object (the IIFE pattern); prefer ES modules for app code.
• 📜 Ambient declarations & @types — declare types existing runtime code; DefinitelyTyped ships the rest.
• ⏳ Async types — Promise<T>, await, Awaited<T>, and tuple-typed Promise.all.
• 🖱️ DOM & events — querySelector<HTMLInputElement>, the Event hierarchy, narrowing e.target.
• 🧠 Generic defaults & inference — <T = string>, inferred type args, <const T>.
• ⚙️ Function types — signatures, typed this, Parameters<F> / ReturnType<F>.
• 🧵 Variadic tuples — [...T, ...U] keeps element types and positions.
• 🛠️ Advanced utilities — extraction utilities and building your own with infer.
• 🎀 Decorators — higher-order functions in @ clothing (TS 5 stage-3).
• 🔄 Migration — allowJs, JSDoc + // @ts-check, kill any, go strict gradually.

// RECAP demo: a fetch + Awaited pipeline — async types + Promise.all + utility
// types working together (the shapes you'd extract with Awaited<ReturnType<...>>).

function fetchUser(id) {
  return Promise.resolve({ id, name: "User-" + id, roles: ["member"] });
}
function fetchPosts(id) {
  return Promise.resolve([{ title: "Hello" }, { title: "World" }]);
}

// In .ts: Awaited<ReturnType<typeof fetchUser>> = { id, name, roles } — resolved shape.
async function buildProfile(id) {
  const [user, posts] = await Promise.all([fetchUser(id), fetchPosts(id)]);
  return user.name + " (" + posts.length + " posts, role " + user.roles[0] + ")";
}

async function main() {
  console.log(await buildProfile(7)); // User-7 (2 posts, role member)
}
main();

2. 🏗️ Build Challenge: A Typed Event Bus

Build a small event bus: createEventBus() with on(event, fn) (returning an unsubscribe function) and emit(event, payload). Get the runtime behaviour right first, then reveal the fully typed solution to see how a generic event map makes it type-safe per event.

// 🏗️ BUILD CHALLENGE — a typed EVENT BUS.
// In .ts you'd type it with a generic event map so on/emit are type-safe per event
// (see the full solution below). Here, build the RUNTIME behaviour:
//
// 1. createEventBus() returns an object with on(event, fn) and emit(event, payload).
// 2. on() registers a listener AND returns an "off" function that removes it.
// 3. emit() calls every listener registered for that event with the payload.
//
// Make these calls produce the expected output:
//   const bus = createEventBus();
//   const off = bus.on("login", (u) => console.log("Welcome " + u.name));
//   bus.on("logout", () => console.log("Goodbye"));
//   bus.emit("login", { name: "Ada" });   // Welcome Ada
//   bus.emit("logout");                    // Goodbye
//   off();                                 // unsubscribe the login handler
//   bus.emit("login", { name: "Grace" });  // (nothing — handler removed)
//   console.log("done");
//
// ✅ Expected output:
//    Welcome Ada
//    Goodbye
//    done

// your code here

First, the runnable plain-JS solution (this is exactly what the typed version compiles to):

function createEventBus() {
  const handlers = {};               // event name -> array of listeners
  return {
    on(event, fn) {
      (handlers[event] = handlers[event] || []).push(fn);
      return () => {                 // return an "off" unsubscribe function
        handlers[event] = handlers[event].filter((h) => h !== fn);
      };
    },
    emit(event, payload) {
      (handlers[event] || []).forEach((fn) => fn(payload));
    },
  };
}

const bus = createEventBus();
const off = bus.on("login", (u) => console.log("Welcome " + u.name));
bus.on("logout", () => console.log("Goodbye"));

bus.emit("login", { name: "Ada" });   // Welcome Ada
bus.emit("logout");                    // Goodbye
off();                                 // unsubscribe the login handler
bus.emit("login", { name: "Grace" });  // (nothing — handler removed)
console.log("done");

And the fully typed TypeScript, using a generic event map so each event's payload is checked:

// A fully typed event bus using a generic EVENT MAP.
type EventMap = {
  login: { name: string };
  logout: void;
};

type Handler<T> = (payload: T) => void;
type Unsubscribe = () => void;

function createEventBus<M>() {
  // Partial record: each key maps to an array of handlers for that event.
  const handlers: { [K in keyof M]?: Handler<M[K]>[] } = {};

  return {
    on<K extends keyof M>(event: K, fn: Handler<M[K]>): Unsubscribe {
      (handlers[event] ??= []).push(fn);
      return () => {
        handlers[event] = handlers[event]!.filter((h) => h !== fn);
      };
    },
    emit<K extends keyof M>(event: K, payload: M[K]): void {
      handlers[event]?.forEach((fn) => fn(payload));
    },
  };
}

const bus = createEventBus<EventMap>();
const off = bus.on("login", (u) => console.log("Welcome " + u.name)); // u: { name: string }
bus.on("logout", () => console.log("Goodbye"));
bus.emit("login", { name: "Ada" }); // ✅ payload type-checked against EventMap
// bus.emit("login", { id: 1 });    // ❌ wrong payload shape is caught
off();

3. 📝 Checkpoint Quiz

Answer each in your head, then expand to check. No peeking first!

Interfaces are open and designed to be extended, so TypeScript merges their members via declaration merging. Type aliases are closed definitions — declaring one twice is a duplicate-identifier error. This is why library-facing, augmentable shapes are usually interfaces.

number. Awaited<T> recursively unwraps every Promise layer to the final resolved value type, exactly as await does at runtime.

Because the selector might not match anything. The | null forces you to handle the "not found" case before using the element. Use the generic (querySelector<HTMLInputElement>) to get a more specific element type.

Only when nothing else determines the type parameter — the caller didn't supply it and TypeScript couldn't infer it from an argument. If inference can find a type, the inferred type wins over the default.

It receives the original method plus a context object, and returns a replacement function (or nothing). At its core it's a higher-order function that wraps the method — for example to add logging or timing.

Add // @ts-check at the top of a .js file (or set allowJs + checkJs) and describe types with JSDoc. You get editor type-checking with zero runtime change, before committing to a .ts rename or build step.

Common Errors (and the fix)

• ❌ Forgetting to return the unsubscribe from on() — then there's no way to remove a listener. ✅ Return a closure that filters the handler out.
• ❌ Emitting before any handler is registered crashes if handlers[event] is undefined. ✅ Guard with (handlers[event] || []).
• ❌ Using any for the event map defeats the purpose. ✅ Use a generic <M> with <K extends keyof M> so payloads are checked.
• ❌ Awaiting inside a loop sequentially when calls are independent. ✅ Collect promises and await Promise.all([...]) for concurrency.

📚 Keep Learning

• 📖 TypeScript Handbook — Introduction
• 📖 Handbook — Utility Types reference
• 📖 Handbook — Everyday Types

🎯 Mini-Challenge: Extend the Bus With once()

Stretch goal — add a once(event, fn) that auto-unsubscribes after the first emit. Start from your build-challenge solution, add the method, and confirm the listener fires only once.

🎉 Checkpoint Complete

• ✅ You recapped the entire applied half of the course in one place
• ✅ You built a typed event bus — runtime first, then a generic event map
• ✅ You combined async types, Promise.all, and Awaited<ReturnType<…>>
• ✅ You self-checked with a 6-question quiz spanning every applied lesson
• ✅ You're ready to apply all of this in a real framework

Practice quiz

Continue this course

• Previous: Migrating JavaScript to TypeScript
• Next: TypeScript with React — Type your React components, props, hooks, and events correctly
• Quick reference: TypeScript cheat sheet

Frequently asked questions

What does this checkpoint cover?

It pulls together the applied half of the course: declaration merging, namespaces, ambient declarations and @types, typing Promises and async/await, DOM and event types, generic defaults and inference, function types with this, variadic tuples, advanced utility types, decorators, and migrating JavaScript to TypeScript. The build challenge and quiz exercise these together rather than one at a time.

How should I approach the build challenge?

Start from the runtime behaviour in the starter: a createEventBus that supports on, emit, and an unsubscribe function. Get the plain-JS version producing the expected output first, then study the fully typed solution to see how a generic event map makes on/emit type-safe per event. Building the runtime, then layering types on, mirrors a real migration.

Why is the typed solution shown separately from the runnable code?

Because the runner executes plain JavaScript — type annotations are erased at runtime. The runnable box proves the behaviour works; the typed solution in the 'Show solution' block shows the real TypeScript, including the generic event map and the mapped-type handler record that the editor would check for you.

What should I do after this checkpoint?

Move on to TypeScript with React, where these applied skills come together in a component framework: typing props and state, events in JSX, hooks with generics, and async data loading. Everything you practised here — utility types, function types, async types, and migration habits — carries directly into typing a real React app.

Related lessons

• Declaration Merging