Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Intersection of mapped types

Consider the following:

type Properties = {
    foo: { n: number };
    bar: { s: string };
    baz: { b: boolean };
};

declare function retrieveValues<K extends keyof Properties>(add?: K[]): Pick<Properties, K>[K];

// what happens
const x: { n: number } | { s: string } = retrieveValues(['foo', 'bar']);

// what I'm really trying to express (type error)
const y: { n: number } & { s: string } = retrieveValues(['foo', 'bar']);

Is there a way to get an intersection of the properties of Pick<Properties, K>? Or just a different way to get the intersection of a set of types based on the presence of relevant strings in an array?

like image 572
Carl Patenaude Poulin Avatar asked Nov 24 '17 00:11

Carl Patenaude Poulin


People also ask

Which of the following is called combining of type types?

An intersection type combines multiple types into one. This allows you to add together existing types to get a single type that has all the features you need.

How do you define intersection types in TypeScript?

An intersection type is a type that merges several kinds into one. This allows you to combine many types to create a single type with all of the properties that you require. An object of this type will have members from all of the types given. The '&' operator is used to create the intersection type.

How do I assign two TypeScript types?

TypeScript allows you to define multiple types. The terminology for this is union types and it allows you to define a variable as a string, or a number, or an array, or an object, etc. We can create union types by using the pipe symbol ( | ) between each type.


2 Answers

Using conditional types and type inference in conditional types it is possible to transform { n: number } | { s: string } directly into { n: number } & { s: string }.

type GetKeys<U> = U extends Record<infer K, any> ? K : never

type UnionToIntersection<U extends object> = {
   [K in GetKeys<U>]: U extends Record<K, infer T> ? T : never
}

type Transformed = UnionToIntersection<{ a: string } | { b: number }>
// Transformed has type {a: string, b: number}

Playground Link

The reason this works is basically because conditional types are distributed over union types. From the conditional types pull request:

Conditional types in which the checked type is a naked type parameter are called distributive conditional types. 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).

like image 137
KPD Avatar answered Sep 24 '22 08:09

KPD


UPDATE: this answer was originally written before conditional types were introduced into the language. For newer versions of TypeScript, you can indeed transform arbitrary unions into intersections:

type UnionToIntersection<U> =
    (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never

declare function retrieveValues<K extends keyof Properties>(
    add?: K[]): UnionToIntersection<Properties[K]>;

const x = retrieveValues(['foo', 'bar']);
/* const x: {
    n: number;
} & {
    s: string;
} */

Or you could write something specifically to merge the properties that are picked from a type:

type PickMerge<T, K extends keyof T> =
    { [P in K]: { [Q in keyof T[P]]: [Q, T[P][Q]] }[keyof T[P]] }[K] extends infer U ?
    [U] extends [[PropertyKey, any]] ? { [KV in U as KV[0]]: KV[1] } : never : never

declare function retrieveValues<K extends keyof Properties>(
    add?: K[]): PickMerge<Properties, K>;

const x = retrieveValues(['foo', 'bar']);
/* const x: {
    n: number;
    s: string;
} */

More explanation upon request.

Playground link to code


TS 2.7- answer:

There's no straightforward type operator which, say, turns a union into an intersection, or allows you to iterate union types and do stuff programmatically with the pieces. So on the face of it you're stuck.

Backing up, if you allow yourself to build Properties from pieces instead of trying to break the pieces apart, you can do this:

type InnerProperties = {
  n: number;
  s: string;
  b: boolean;
}

type OuterProperties = {
  foo: "n";
  bar: "s";
  baz: "b";
}

You can see how each key in OuterProperties is a mapping to a key in InnerProperties. (Note that in your Properties, each outer property had a single inner property. You aren't restricted to that, though. If you wanted, say, the "foo" outer key to correspond to something with multiple inner properties like {n: number, r: RegExp} then you would add r: RegExp to InnerProperties and put foo: "n"|"r" in OuterProperties.)

Now you can pick out partial properties like this:

type PickProps<P extends keyof OuterProperties = keyof OuterProperties> = {
  [K in OuterProperties[P]]: InnerProperties[K];
}

So PickProps<"foo"> is {n: number}, and PickProps<"bar"> is {s: string}, and PickProps<"baz"> is {b: boolean}. And notice that PickProps<"foo"|"bar"> is {n: number; s: string}, so we have the output type of retrieveValues() ready. We still have to define Properties in terms of InnerProperties and OuterProperties, like this:

type Properties = {
  [K in keyof OuterProperties]: PickProps<K>
}

And finally you can declare that function the way you want it:

declare function retrieveValues<K extends keyof Properties>(add?: K[]): PickProps<K>;
const y: { n: number } & { s: string } = retrieveValues(['foo', 'bar']);

So that works. Hope that's helpful. Good luck!

like image 43
jcalz Avatar answered Sep 21 '22 08:09

jcalz