Typescript Distributive Conditional Types

by

Hmm, I just read through the documentation and it makes sense to me… I don’t know if I can explain it any better than that, but let’s go through it. In what follows, and ...x..., means “some expression in which x might appear”.

Conditional types in which the checked type is a naked type parameter are called distributive conditional types.

In this case, a type parameter means a generic type parameter, and a naked type parameter is a type expression where the type parameter appears alone and is not part of some more complex type expression. And the checked type is the type appearing before extends. Let’s see some examples:

  • type A<T> = string extends T ? "yes" : "no" This is not a distributive conditional type. The checked type is string, which is not a generic type parameter.
  • type B<T> = {x: T} extends {x: number} ? "yes" : "no" This is not a distributive conditional type. The checked type is {x: T}, which has the type parameter T in it, but is not a naked type parameter.
  • type C<T> = T extends string ? "yes" : "no" This is a distributive conditional type; the checked type is T, which is a naked generic type parameter.

Distributive conditional types are automatically distributed over union types during instantiation. For example, an instantiation of T extends U ? X : Y with the type argument A | B | C for T is resolved as (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y).

This is the essence of what a distributive property does. If you have a type alias F<T> defined to be a distributive conditional type, as in:

type F<T> = T extends ...T... ? ...T... : ...T...

Then F<T> will distribute over unions, meaning that for any types A and B, the type F<A | B> will be equivalent to the type F<A> | F<B>

In instantiations of a distributive conditional type T extends U ? X : Y, references to T within the conditional type are resolved to individual constituents of the union type (i.e. T refers to the individual constituents after the conditional type is distributed over the union type).

This is the part that confused you, but it’s just explaining how the distribution works. It’s saying that to evaluate F<A | B>, you should evaluate F<A> | F<B>. So for F<A>, you take F<T> = T extends ...T... ? ...T... : ...T... and plug in A for T (to get A extends ...A... ? ...A... : ...A...), and then plug in B for T (to get B extends ...B... ? ...B... : ...B...), and then unite them.

Let’s go through a concrete example:

type D<T> = T extends string ? T : "nope"

What is this:

type E = D<"a" | "b" | 0 | true>

Well, here’s how not to do it:

type E = ("a" | "b" | 0 | true) extends string ? ("a" | "b" | 0 | true) : "nope" //👎

type E = "nope" //👎

I just plugged "a" | "b" | 0 | true into T without distributing, and that’s wrong. Here’s how to do it correctly:

type E = D<"a"> | D<"b"> | D<0> | D<true> //👍

type E = ("a" extends string ? "a" : "nope") |
         ("b" extends string ? "b" : "nope") |
         (0 extends string ? 0 : "nope") |
         (true extends string ? true : "nope") //👍

type E = ("a") | ("b") | ("nope") | ("nope") //👍

type E = "a" | "b" | "nope" //👍

See, we took the “individual constituents of the union” and replaced T with each one of them in turn.

Okay, I hope that makes more sense now. Good luck!

More Related Contents:

  1. How to define Typescript type as a dictionary of strings but with one numeric “id” property
  2. Expression ___ has changed after it was checked
  3. Could not find a declaration file for module ‘module-name’. ‘/path/to/module-name.js’ implicitly has an ‘any’ type
  4. How to suppress “error TS2533: Object is possibly ‘null’ or ‘undefined'”?
  5. TypeScript conditional types – filter out readonly properties / pick only required properties
  6. Typescript: infer type of generic after optional first generic
  7. Typescript Discriminated Union allows invalid state
  8. Why can’t I return a generic ‘T’ to satisfy a Partial?
  9. Define global constants
  10. Create an enum with string values
  11. Chaining RxJS Observables from http data in Angular2 with TypeScript
  12. How can I declare a global variable in Angular 2 / Typescript? [closed]
  13. Safe navigation operator (?.) or (!.) and null property paths
  14. How to test if two types are exactly the same
  15. Angular2 – Http POST request parameters
  16. Why is Event.target not Element in Typescript?
  17. How do I check that a switch block is exhaustive in TypeScript?
  18. How to ‘map’ a Tuple to another Tuple type in Typescript 3.0
  19. What is target in tsconfig.json for?
  20. ES7 Object.entries() in TypeScript not working
  21. Extend (Update) third-party old type declaration interface with new one
  22. Derive union type from tuple/array values
  23. Is it possible to generate string literal combinations with template literal in TypeScript?
  24. Can’t narrow the type of an object property even after checking it with a type guard
  25. Why do subtypes need to be assigned to a variable before being used as a function argument?
  26. Typescript narrowing of keys in objects when passed to function
  27. What do square brackets mean where a field should be in typescript?
  28. Typescript type T or function () => T usage
  29. Flatten object with custom keys in Typescript
  30. What is a TypeScript Map file?

Leave a Comment