Craftstack Academy
WebTypeScriptCourse 3 of 3 · The Front-End Foundation

The Type-Safe Upgrade

TypeScript for developers who already know JavaScript: types, generics, and real-world patterns.

  • 4 sessions
  • 60 min each
  • Intermediate
  • Builds on Course 2
  • VS Code on your own computer
  • Certificate when you finish all 3 courses

Course overview

What you'll learn

  • Install TypeScript, compile with tsc, read compiler errors, and meet basic types, inference, tsconfig.json and enums.
  • Describe objects with interfaces, use union types and an exhaustive switch, type your functions, and build a typed course catalog.
  • Generic functions and interfaces, Partial and Pick, type narrowing, and why generics beat any.
  • Type a fetch call, swap any for unknown, migrate JavaScript, and build a typed course catalog module.

Who this course is for

  • You finished Course 2, The Interactive Web, or already know what it covers.
  • You learn best by writing the code yourself, not by watching videos.
  • You want feedback on your own code, at your own pace, one hour at a time.
  • You want to work with real files on your own computer.

Course syllabus

  • 4 sessions
  • 24 blocks of 10 min
  • 4 hours

Each session is one hour with the AI tutor and uses one credit. Sign in to start.

  1. Session 2Interfaces, Types & FunctionsDescribe objects with interfaces, use union types and an exhaustive switch, type your functions, and build a typed course catalog.
    1. Welcome back and warm-up10 min
    2. Interfaces, optional and readonly10 min
    3. Type aliases, unions and an exhaustive switch10 min
    4. Typing functions10 min
    5. Extending interfaces and the catalog project10 min
    6. Final check and wrap-up10 min
  2. Session 3Generics & Advanced TypesGeneric functions and interfaces, Partial and Pick, type narrowing, and why generics beat any.
    1. Welcome back and warm-up10 min
    2. Generic functions10 min
    3. Generic interfaces10 min
    4. Utility types, narrowing, and generics vs any10 min
    5. Project: toolbox.ts10 min
    6. Final check and wrap-up10 min
  3. Session 4Real Project & CapstoneType a fetch call, swap any for unknown, migrate JavaScript, and build a typed course catalog module.
    1. Welcome back and warm-up10 min
    2. Typing a fetch call10 min
    3. unknown instead of any10 min
    4. Migrating JavaScript and declaration files10 min
    5. Capstone: a typed course catalog module10 min
    6. Final check, next steps and celebration10 min

How the tutor teaches

The same three rules in every session, from the first line of code to the last.

Practice, not videos

You write all of the code. The tutor reacts to what you actually typed, line by line.

Hints, not answers

A ladder from a light nudge to the solution, and only after you have made a real attempt.

Real output, never invented

Your code runs for real. The tutor reads what the machine showed, and trusts it.

Keep the momentum going

Where the other paths begin.

All courses

Frequently asked questions

What students ask before they start The Type-Safe Upgrade.

Do I need to install anything?

Yes: this course uses VS Code on your computer. Its first session walks you through the setup step by step.

What if I get stuck?

The tutor gives a ladder of hints, from a light nudge to the solution, and only after you have made a real attempt.

Do I keep my code?

Yes. Your files stay on your own computer, in the folder you make in the first session.

Do I get a certificate?

Yes, for the whole path. When you have finished all 3 courses of The Front-End Foundation (this is Course 3), you get the The Front-End Foundation certificate of completion with your name: a link anyone can check, one-click LinkedIn and a PDF. Your progress towards it is on your dashboard.

Do I need anything from before?

This course builds on Course 2, The Interactive Web. Take the sessions in order.

Write your first tag in the next 20 minutes.

Twenty minutes with the tutor, right in your browser. No card, nothing to install.

Start the free trial
A session: the tutor's chat on the left, the code editor with a Java program and its output on the right