Skip to main content

Template Literal Type Shenanigans

A Learning TypeScript > Type Operations 🥗 appetizer project.

Hi! This is Josh, author of Learning TypeScript. Congrats on making it all the way through the book to the final chapter! Type operations are a ton of fun to play around with once you get the hang of them.

These appetizer projects showcase a bunch of my favorite cool things you can do using template literal types with conditional types. Each gives a small intro to the new thing because it can be tricky to find out the ways you can or cannot combine type operations. There's no silly theme, to help not distract from learning those new things.

I hope you're enjoying the book and these projects! 💖

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/type-operations/template-literal-type-shenanigans
shell
code projects/type-operations/template-literal-type-shenanigans

In your terminal, run the TypeScript compiler via the tsc script within whichever step you're working on. For example, to start the TypeScript compiler on the first step in watch mode:

shell
npm run tsc -- --project 01-spongecase --watch
shell
npm run tsc -- --project 01-spongecase --watch

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

Steps​

Notes​

  • Don't import code from one step into another.
  • You'll be working entirely in the type system. There will be no runtime code. 🤘