Typescript: Conditional types

Conditional types

Conditional types in TypeScript are super powerful, they allow us to create type functions. I'll show you.

Let's say we have 3 types: A, B and C.

TypeScript
type A
type B
type C

They could be anything, but let's say that A is string, B is number and C is the union of A and B.

TypeScript
type A = string;
type B = number;
type C = A | B;

Now, we want to convert string and number to literal numeric representations.

string should be 1,

TypeScript
type NumberA = 1;
type NumberB = number;
type NumberC = 1 | number;

number should be 2, and anything else should be 0.

TypeScript
type NumberA = 1;
type NumberB = 2;
type NumberC = 1 | 2;

If this was a function, you would simply use conditionals to drive the code. It would look something like this:

TypeScript
const ToNumber = (T) => (T === string ? 1 : T === number ? 2 : 0);

That syntax doesn't work for types, but it's pretty close.

TypeScript
type ToNumber = (T) =>
  T === string
  ? 1
  : T === number
  ? 2
  : 0

Instead of an arrow, we use equals.

TypeScript
type ToNumber(T) =
  T === string
  ? 1
  : T === number
  ? 2
  : 0

Instead of parenthesis, we use angle brackets.

TypeScript
type ToNumber<T> =
  T === string
  ? 1
  : T === number
  ? 2
  : 0

And instead of triple equals, we use extends.

TypeScript
type ToNumber<T> = T extends string ? 1 : T extends number ? 2 : 0;

See, we are not asking TypeScript if T is equal to string, what we're asking is if T is a subset of string.

That also includes literal string types, such as "abc".

TypeScript
type A = string
type B = number
type C = A | B

ToNumber<A> // -> 1
ToNumber<B> // -> 2
ToNumber<C> // -> 1 | 2
ToNumber<boolean> // -> 0
ToNumber<"abc"> // -> 1

LinkConclusion

References are below.

This article is part of my TypeScript Narrowing Series. You can read the full series for free on my blog.

Leave a like, have a great day, and I'll see you soon!

LinkReferences

  1. Conditional Types TypeScript Documentation

Join our Newsletter and be the first to know when I launch a course, post a video or write an article.

This field is required
This field is required