Jedes Mal, wenn ich als Foo in TypeScript schreibe, spüre ich die Last der Niederlage.

Es gibt ein Szenario, in dem dieses Gefühl besonders intensiv ist: Wenn eine Funktion einen Parameter annimmt, der davon abhängt, welcher "Modus" aktiv ist.

Klarer mit Beispielcode:

type Provider = "PROVIDER A" | "PROVIDER B";
type ProviderAOpts = { ... };
type ProviderBOpts = { ... };

function connect(provider: Provider, options: ProviderAOpts | ProviderBOpts)  {
  switch (provider) {
    case "PROVIDER A":
      // options is ProviderAOpts
    case "PROVIDER B":
      // options is ProviderBOpts
  }
}

(Ich habe versucht, realistischere Namen anstelle von foo, goo, dog und cat zu verwenden).

Wenn Sie einige Zeit mit TypeScript verbracht haben, könnten Sie vermuten, dass wir dies früher mit ProviderAOpts und ProviderBOpts gehandhabt haben.

Aber manchmal schlägt man mit der Faust auf den Tisch und behauptet: „Nicht mehr!“

1. Was nicht funktioniert

Das erste, was mir in diesen Fällen immer in den Sinn kommt, ist die Verwendung von Funktionsüberladung:

function connect(provider: "PROVIDER A", options: ProviderAOpts): void;
function connect(provider: "PROVIDER B", options: ProviderBOpts): void;

function connect(provider: Provider, options: ProviderAOpts | ProviderBOpts) {
  switch (provider) {
    case "PROVIDER A":
    // (options as ProviderAOpts) ❌
    case "PROVIDER B":
    // (options as ProviderBOpts) ❌
  }
}

Was nicht funktioniert. Die Funktionssignatur wird nicht korrekt abgeleitet. Der Optionsparameter ist immer ProviderAOpts | ProviderBOpts. die sich zur gemeinsamen Union auflösen wird.

Ts verknüpft beide Parameter nicht korrekt.

2. Was funktioniert, aber nicht die Verknüpfung der Parameter ist

Das nächste Tool, das ich versuche, sind Typprädikate:

type ConnectOptions = ProviderAOpts | ProviderBOpts;

function isAOptions(options: ConnectOptions): options is ProviderAOpts {
  return (options as ProviderAOpts).$$$ !== undefined;
}

function isBOptions(options: ConnectOptions): options is ProviderBOpts {
  return (options as ProviderBOpts).$$$ !== undefined;
}

function connect(provider: Provider, options: ConnectOptions) {
  switch (provider) {
    case "PROVIDER A":
      if (isAOptions(options)) {
        ...
      }
    case "PROVIDER B":
      if (isBOptions(options)) {
        ...
      }
  }
  ...
}

Aber ehrlich gesagt haben wir nichts gelöst. Wir haben das einfach unter den Teppich geschoben? Zusätzliche ifs und eingeführt, wir verknüpfen die Parameter immer noch nicht.

3. Was nicht funktioniert und mich zum Weinen bringt

Generika. Ich habe versucht, Generika zu verwenden, um die Parameter zu verknüpfen. Funktioniert nicht:

function connect(
  provider: T,
  options: T extends "PROVIDER A" ? ProviderAOpts : ProviderBOpts
) {
  switch (provider) {
    case "PROVIDER A":
    // (options as ProviderAOpts) ❌
    case "PROVIDER B":
    // (options as ProviderBOpts) ❌
  }
}

Ich habe mich so sehr bemüht und bin so weit gekommen
Aber am Ende spielt es keine Rolle
Ich musste fallen, um alles zu verlieren
Aber am Ende spielt es keine Rolle
?‍?

4. Was funktioniert, zwingt uns aber dazu, die Funktionssignatur zu ändern?

Das Ändern der Opt-Parameter durch Hinzufügen des Anbietertyps reicht aus:

type Provider = "PROVIDER A" | "PROVIDER B";

type ProviderOptsBase = {
  provider: Provider;
}

type ProviderAOpts = ProviderOptsBase & {
  provider: "PROVIDER A";
  ...;
};

type ProviderBOpts = ProviderOptsBase & {
  provider: "PROVIDER B";
  ...;
};

function connect(options: ConnectOptions) {
  switch (options.provider) {
    case "PROVIDER A":
      // options is ProviderAOpts ✅
    case "PROVIDER B":
      // options is ProviderBOpts ✅
  }
}

Dies ist die häufigste Lösung, es ist jedoch nicht immer möglich, die Funktionssignatur zu ändern. Oder vielleicht wollen Sie es einfach nicht. Grundsatzfrage ?.

Twitter zur Rettung

Danke an Mateusz Burzyński (@AndaristRake) und Lenz Weber (@phry)

wir können... ??

5. Was funktioniert: das destrukturierte Tupel

type Provider = "PROVIDER A" | "PROVIDER B";
type ProviderAOpts = { ... };
type ProviderBOpts = { ... };

function connect(
  ...[provider, options]:
    | ["PROVIDER A", ProviderAOpts]
    | ["PROVIDER B", ProviderBOpts]
) {
  switch (provider) {
    case "PROVIDER A":
      // options is ProviderAOpts ✅
    case "PROVIDER B":
      // options is ProviderBOpts ✅
    ...
  }
}

connect("PROVIDER A", { ... });
connect("PROVIDER B", { ... });
                      ^ autocomplete works ✅

Die Sache ist also, dass wir ein Tupel (Array) mit genau den Typen zerstören, die wir wollen.

Der einzige Nachteil: Wenn wir wählerisch sind und dem Tupel weitere Paare hinzufügen, können wir hier einen generischen Typ extrahieren:

6. Was funktioniert: verallgemeinerte Tupellösung

type Provider = "PROVIDER A" | "PROVIDER B";
type ProviderAOpts = { ... };
type ProviderBOpts = { ... };

type ProviderOpts = {
  "PROVIDER A": ProviderAOpts;
  "PROVIDER B": ProviderBOpts;
};

// solves to 
// ["PROVIDER A", ProviderAOpts] | ["PROVIDER B", ProviderBOpts]
type ConnectOptions = {
  [K in keyof ProviderOpts]: [K, ProviderOpts[K]];
}[keyof ProviderOpts]; 

function connect(...[provider, options]: ConnectOptions) {
  switch (provider) {
    case "PROVIDER A":
      // options is ProviderAOpts ✅
    case "PROVIDER B":
      // options is ProviderBOpts ✅
    ...
  }
}

connect("PROVIDER A", { ... });
connect("PROVIDER B", { ... });
                      ^ autocomplete works ✅

7. TL;DR. KOPIEREN EINFÜGEN, DANKE

type Provider = "PROVIDER A" | "PROVIDER B";
type ProviderAOpts = { ... };
type ProviderBOpts = { ... };

type ProviderOpts = {
  "PROVIDER A": ProviderAOpts;
  "PROVIDER B": ProviderBOpts;
};

// aux type to extract the key and the options from ProviderOpts
type KeyOpts = {
  [K in keyof T]: [K, T[K]];
}[keyof T];


function connect(...[provider, options]: KeyOpts) {
  switch (provider) {
    case "PROVIDER A":
      // options is ProviderAOpts ✅
    case "PROVIDER B":
      // options is ProviderBOpts ✅
    ...
  }
}

connect("PROVIDER A", { ... });
connect("PROVIDER B", { ... });
                      ^ autocomplete works ✅

Danke an Mateusz und Lenz für die Hilfe?.

Danke fürs Lesen?.