Skip to main content

Type Illusions

A Learning TypeScript > Declaration Files 🍲 entree project.

Salutations! Come one, come all - to the amazing Type Illusionist!

It's no trick, no common shenanigan. These illusions will amaze and astound.

Watch as I make the entire ./show.ts file... disappear! ✨ Poof! ✨

But wait, there's more! I will also disappear all the type annotations in ./index.ts, leaving behind only JavaScript!

Now, our audience volunteer -that's you!- will have to add those type annotations back to prove the magic did not harm the code's runtime behavior.

Setup​

If you haven't yet, set up the github.com/LearningTypeScript/projects repository locally.

shell
git clone https://github.com/LearningTypeScript/projects learning-typescript-projects
cd learning-typescript-projects
npm i
shell
git clone https://github.com/LearningTypeScript/projects learning-typescript-projects
cd learning-typescript-projects
npm i

Open your editor in this project's directory:

shell
code projects/declaration-files/type-illusions
shell
code projects/declaration-files/type-illusions

In your terminal, run the TypeScript compiler via the tsc script. For example, to start the TypeScript compiler in watch mode:

shell
npm run tsc -- --watch
shell
npm run tsc -- --watch

Files​

  • index.ts: Add back type imports from "./show" and corresponding type annotations
  • show.d.ts: Declare types for the missing show module here based on the remaining code in index.ts
  • index.solution.ts and show.solution.ts: Solution code

Notes​

Note: your terminal should be in the type-illusions directory, not the root repository's directory.

  • Don't use any or leave any implicit anys.
  • Don't change any runtime code behavior. You're just working in the type system.