Introduction to type-challenges

Introduction to type-challenges


4 min read

Welcome to the type-challenges series!

In this series, I'll be walking through many of the challenges in the type-challenges repository. These challenges are koans for the TypeScript type system.

What's a koan?

In the world of code, a koan is a programming challenge meant to teach you a single bite-size lesson. In the case of type-challenges, the koans teach you advanced concepts of the TypeScript type system by defining type challenges that you solve by implementing types.

type-challenges has many koans:

The many challenges of type-challenges

Learning from koans is an iterative process.

The easy koans teach you foundational lessons about the TypeScript type system. You'll then build on the lessons learned from those koans to solve the medium koans, which teach you more advanced lessons about the type system. You'll then build on the lessons learned from those koans to solve the hard koans, and so on.

Before we get started, let's take a look at what a koan looks like and how the interface works.

Hello World

The first koan is a warm-up challenge called "Hello World". It's the perfect opportunity to digest how to go about solving a challenge.

Each challenge is hosted on the TypeScript Playground. This is a site that allows you write TypeScript code in an editor in order to play around with code and types and receive immediate feedback on type correctness.

Hello World koan in TypeScript Playground

The above image is a screenshot of the "Hello World" challenge. On the left is the editor where you'll write your code. On the right is an information panel which shows the current challenge.

Solving a challenge

For each challenge, the editor contains a section for your code (which always contains an unimplemented type, in this case the HelloWorld type) and a section for the test cases.

There are two ways to tell that the test cases are currently failing:

  1. The test cases in the editor show red squigglies on each of the failing test cases:

    Red squigglies showing the failing test cases

  2. At the bottom of the right panel in the "Description" tab, there's a box which shows the current status of the tests:

    Currently failing tests

Each challenge will begin in a failing state. Your job is to implement the type in a way that causes all test cases to pass.

When the type is passing, the red squigglies will all disappear and the bottom of the "Description" panel will show a happy state:

The challenge is solved

Since this is a warm-up challenge, there's not really much to this. The solution is literally in a comment on the unimplemented type:

/* _____________ Your Code Here _____________ */

type HelloWorld = any // expected to be a string

/* _____________ Test Cases _____________ */
import { Equal, Expect, NotAny } from '@type-challenges/utils'

type cases = [
  Expect<Equal<HelloWorld, string>>

Implementing the type causes it to pass:

type HelloWorld = string

Navigating challenges

At the bottom of the "Description" panel are two buttons: "Solutions" and "Next Challenge".

Unsolved buttons

The "Solutions" button takes you to a collection of all of the user-submitted solutions to the current challenge. This is a great way to compare your solution or to find a working solution if you can't figure it out.

I want to take this opportunity to say that there's nothing wrong with cheating! Solving some of these challenges require knowledge that we don't yet possess, and looking at the solutions is the only way to gain that knowledge.

My first time through the challenges, I cheated on like half of them. I made sure to take notes on the solutions though and wrote out the solution by hand to help myself become familiar with the solution. It's a great way to build a little familiarity even if you didn't come up with the solution yourself!

The "Next Challenge" button does what it says. Even if you haven't solved the challenge, you can move onto the next one if you don't feel like solving the current solution for whatever reason.

There's also a third button that only appears when you solve the current challenge: "Share Answer".

The three buttons displayed when the challenge has been solved

This button allows you to share your solution directly to the type-challenges GitHub repo. This means it'll be shown to other users who click the "Solutions" button.

Get started!

Now that you understand how the challenges interface works, GO GET STARTED!

You probably won't understand a lot of the challenges the first time you see them. That's totally fine!

Don't be afraid to take a peek at user-submitted solutions if you're stuck. Just make sure you take the time to digest another user's solution to learn what you can from it.