Bei der Arbeit mit TypeScript müssen Sie möglicherweise einen Union-Typ und ein Array definieren, das alle möglichen Werte dieses Typs enthält. Ein gängiger Ansatz besteht darin, etwa Folgendes zu schreiben:

type Taste = 'しょうゆ' | 'みそ' | 'とんこつ';
const tastes = ['しょうゆ', 'みそ', 'とんこつ'];

Auf den ersten Blick scheint das in Ordnung zu sein. Allerdings gibt es hier ein verstecktes Problem: Jedes Mal, wenn Sie eine Option ändern oder hinzufügen möchten, müssen Sie sowohl den Taste-Union-Typ als auch das Geschmacks-Array aktualisieren. Diese Doppelarbeit kann zu Fehlern führen und die Pflege des Codes mühsamer machen.

Glücklicherweise gibt es eine Möglichkeit, dies zu vereinfachen, indem die Redundanz reduziert wird. Durch die Verwendung der as const-Assertion und des typeof in TypeScript können Sie die Definition sowohl des Union-Typs als auch des Arrays an einem Ort konsolidieren. So können Sie den obigen Code umgestalten:

const tastes = ['しょうゆ', 'みそ', 'とんこつ'] as const;
type Taste = (typeof tastes)[number];

Dieser Ansatz hat mehrere Vorteile:

1. Eine einzige Quelle der Wahrheit:
   
   Sie definieren die Werteliste nur einmal im Geschmacks-Array. Der Geschmackstyp wird automatisch von diesem Array abgeleitet. Wenn Sie also jemals die Liste aktualisieren müssen, müssen Sie dies nur an einer Stelle tun.

2. Typsicherheit:
   
   Durch die Verwendung von as const behandelt TypeScript das Tastes-Array als Tupel mit Literaltypen und nicht nur als String-Array. Dadurch wird sichergestellt, dass der Geschmackstyp korrekt bleibt und mit den Geschmackswerten übereinstimmt.

3. Bessere Wartung:
   
   Da der Taste-Typ aus dem Array generiert wird, besteht keine Gefahr einer Nichtübereinstimmung zwischen dem Typ und den tatsächlichen Werten. Dies reduziert das Fehlerpotenzial und erleichtert die Wartung des Codes.

Beispielanwendungsfall

Wenn Sie nun den Taste-Typ in Ihrem Code verwenden, stimmt er garantiert mit den Werten im Taster-Array überein:

function describeTaste(taste: Taste): string {
  switch (taste) {
    case 'しょうゆ':
      return 'Savory soy sauce flavor.';
    case 'みそ':
      return 'Rich miso flavor.';
    case 'とんこつ':
      return 'Creamy pork broth flavor.';
    default:
      return 'Unknown taste';
  }
}

const allTastes: Taste[] = tastes; // Safe, because they match the type!

Dieses Muster verbessert nicht nur die Lesbarkeit Ihres Codes, sondern sorgt auch dafür, dass er weniger fehleranfällig ist, insbesondere wenn es um mehrere Werte geht, die synchron gehalten werden müssen.

Durch die Übernahme dieser Strategie können Sie Ihren TypeScript-Code wartbarer und skalierbarer machen. Dies ist besonders nützlich, wenn Sie mit großen Wertemengen arbeiten oder wenn Ihre Codebasis mit der Zeit wächst.