DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Lucas Paganini
Lucas Paganini

Posted on • Originally published at lucaspaganini.com

Typescript: Conditional types

Conditional types


See this and many other articles at lucaspaganini.com

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.

type A
type B
type C
Enter fullscreen mode Exit fullscreen mode

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

type A = string;
type B = number;
type C = A | B;
Enter fullscreen mode Exit fullscreen mode

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

string should be 1,

type NumberA = 1;
type NumberB = number;
type NumberC = 1 | number;
Enter fullscreen mode Exit fullscreen mode

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

type NumberA = 1;
type NumberB = 2;
type NumberC = 1 | 2;
Enter fullscreen mode Exit fullscreen mode

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

const ToNumber = (T) => (T === string ? 1 : T === number ? 2 : 0);
Enter fullscreen mode Exit fullscreen mode

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

type ToNumber = (T) =>
  T === string
  ? 1
  : T === number
  ? 2
  : 0
Enter fullscreen mode Exit fullscreen mode

Instead of an arrow, we use equals.

type ToNumber(T) =
  T === string
  ? 1
  : T === number
  ? 2
  : 0
Enter fullscreen mode Exit fullscreen mode

Instead of parenthesis, we use angle brackets.

type ToNumber<T> =
  T === string
  ? 1
  : T === number
  ? 2
  : 0
Enter fullscreen mode Exit fullscreen mode

And instead of triple equals, we use extends.

type ToNumber<T> = T extends string ? 1 : T extends number ? 2 : 0;
Enter fullscreen mode Exit fullscreen mode

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".

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
Enter fullscreen mode Exit fullscreen mode

Conclusion

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!

References

  1. Conditional Types TypeScript Documentation

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›