TypeScript `string literal` 子集不可分配给重载中的完整集 function

Question

Problem

Trying to create a mapping function for typed key-value pairs:

type Color = {
  "Red": number,
  "Green": string
  "Yellow": boolean
  "Purple": object
};
type PropMapping = {
  "Apple": Pick<Color, "Red" | "Green">,
  "Banana": Pick<Color, "Yellow" | "Green">,
  "Grape": Pick<Color, "Purple" | "Green">
}

function map(key: "Apple"): Pick<Color, "Red" | "Green">;
function map(key: "Banana"): Pick<Color, "Yellow" | "Green">;
function map(key: "Grape"): Pick<Color, "Purple" | "Green">;
function map(key: keyof PropMapping): Partial<Color> {
  // perform actual mapping in here (e.g. via switch-case)
  return {};
}

Later on I try to use this mapping function, but with a subset of the Color type

// type of fruits is a subset of `keyof PropMapping`
const fruits: (keyof Pick<PropMapping, "Apple" | "Banana">)[] = ["Apple", "Banana", "Banana"];

// call the mapping function on each fruit
const colors: Partial<Color>[] = fruits.map(fruit => map(fruit));

However, on the call to map(fruit) I get the following error:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '"Apple" | "Banana"' is not assignable to parameter of type '"Grape"'

Type '"Apple"' is not assignable to type '"Grape"'.

Seems odd to me since the fruit parameter is a subset of the possible fruits that could be passed in. Having trouble making this mapping function overload work without using the as keyword (needing as is a bit of code-smell to me).

End Goal

I would like to be able to reconstruct Color from one or more Partial<Color> s. For instance, say I do this:

const redGreen = map("Apple");
const yellowGreen = map("Banana");
const purpleGreen = map("Grape");

const allColors: Color = {
  ...redGreen,
  ...yellowGreen,
  ...purpleGreen
};

The above works as TypeScript can infer that the aggregated Color object's properties are all there. However, I'd like to maintain the ability to also aggregate Partial<Color> objects as show in the example above:

const colors: Partial<Color>[] = fruits.map(fruit => map(fruit));

This is the part that breaks for me

Edits

EDIT: Changed Color to be an object to better model my situation (and make it easier for others to copy-paste into their own IDEs

EDIT2: Fixing overload return types

EDIT3: (keyof Pick<PropMapping, "Apple" | "Banana">)[] ...oh gosh. Thanks everyone for pointing these out

Answer 1

TypeScript does not support calling multiple overload signatures at the same time. It is conceivable that the compiler could support resolving such calls by allowing unions of the arguments and then returning a union of the return types, but this is not a feature, at least for now. See microsoft/TypeScript#14107 for an open suggestion for this sort of support.

Unless and until this is supported, you'll need to refactor your code if you want the compiler to understand this sort of call. You could add a call signature for each possible expected set of parameters, but that's only feasible for a small number of initial overload sets, since if you start with n disjoint call signatures you'd end up with 2 ⁿ merged signatures.

---

For the particular example code you've posted where you are mapping keys to value types, by far the most straightforward solution is to abandon overloads (or at least abandon multiple call signatures) in favor of a generic function, like this:

function map2<K extends keyof PropMapping>(key: K): PropMapping[K];
function map2(key: keyof PropMapping): Color {
    return null!;
}

Here, map2 takes a key parameter of generic type K constrained to be a key of your PropMapping type, and it returns PropMapping[K] , the type of the value you get when you look up the K key in a PropMapping object.

Then your array call should work:

const colors = fruits.map(fruit => map2(fruit));
// const colors: (Pick<Color, "Red" | "Green"> | Pick<Color, "Green" | "Yellow">)[]

---

Okay, hope that helps; good luck!

Playground link to code