TypeScript Assignability Quiz!

When delving into the world of TypeScript, one of the first features you hear about is its structural type system. Unlike other languages, you do not have to provide the exact type a function demands in TypeScript. Another type will do, as long as it's compatible with what's expected.

But what does it mean for a type to be compatible with another one?

Glad you asked! In this chapter, we'll embark on an exploration of TypeScript's concept of assignability. And what better way to sharpen our intuition than playing a game? Just like children disassembling their toys to understand them, we will try to understand TypeScript's most fundamental design choices by testing our assumptions and seeing what breaks. I'll test your intuition of assignability by asking you a series of questions, starting with the one right before you.

Let's find out if you're up to the challenge! 😄

// Is `"Welcome!"` assignable to `string`?

type Quiz = "Welcome!" extends string ? true : false;

// Click on either `true` or `false` to give your answer:

type Test = Expect<Equal<Quiz, 
true|false
>>;

Assignability is the only language spoken by the type system. Whenever we get a type error, it's always a complaint about an assignability rule that has been broken. These rules may appear straightforward for primitive types, objects or arrays, but what about unions, intersections, read-only & optional properties, or even function types?

Contemplating these questions will take us to the strange land of type variance, a concept that's often misunderstood and – even if you've never heard about it – has likely caused a stumble or two along your path!

Let's play

When it comes to quickly building an intuition, nothing beats a good game. Note that all the forthcoming questions presume that Strict Mode is enabled in our tsconfig.json (as it should be! 😈)

Let's get into it! 🎮