TypeScript Academy · Lektion

Locale-bewusste Typinferenz

Stellen Sie sicher, dass alle Locales dieselbe Schlüsselstruktur verwenden.

Lektion 4 von 413 Schritte

Locale-bewusste Typinferenz ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Locale-spezifische Typinferenz

Eine App wird mit mehreren Locales ausgeliefert (en, tr, de ...). Wir möchten einen Typ, der einen Fehler ausgibt, wenn in einem Locale Schlüssel fehlen, die im Basis-Locale vorhanden sind, damit Übersetzungen niemals unbemerkt auseinanderlaufen.

Ein Basis-Locale

Wählen Sie ein Locale (üblicherweise en) als kanonische Schlüsselstruktur. Jedes andere Locale muss derselben Struktur entsprechen.

const en = {
  greeting: "Hello",
  cart: { empty: "Empty", checkout: "Checkout" },
} as const;

type Base = typeof en;

Andere Locales einschränken

Typisieren Sie jedes weitere Locale als die Struktur des Basis-Locales. Ein fehlender Schlüssel ist nun in der Datei dieses Locales ein Compile-Fehler.

const tr: Base = {
  greeting: "Merhaba",
  cart: { empty: "Bo\u015f", checkout: "\u00d6deme" },
};
// Omitting cart.checkout -> Error: property missing

Auch zusätzliche Schlüssel erkennen

Wenn Sie den Basistyp als Annotation verwenden, werden auch unbekannte Schlüssel gemeldet, die in einem Locale, aber nicht im Basis-Locale vorkommen. So werden übrig gebliebene oder falsch geschriebene Einträge erkannt.

const de: Base = {
  greeting: "Hallo",
  cart: { empty: "Leer", checkout: "Kasse" },
  extra: "oops", // Error: not in Base
};

Ein Helper zum Definieren von Locales

Ein generischer Helper erzwingt die Struktur und bewahrt dabei jeden Wert, sodass jedes Locale an einer klaren Stelle definiert werden kann.

function defineLocale<T extends Base>(loc: T): T {
  return loc;
}

const fr = defineLocale({
  greeting: "Bonjour",
  cart: { empty: "Vide", checkout: "Paiement" },
});

Eine Registry aller Locales

Sammeln Sie die Locales in einem Record. Wenn jeder Wert auf Base eingeschränkt wird, ist eine einheitliche Struktur in der gesamten App garantiert.

const locales: Record<string, Base> = { en, tr, de: fr };
// every entry must have the full Base key structure

Gleichheit auf Typebene (tief)

Für strengere Garantien können Sie einen SameKeys-Typ erstellen, der Schlüsselstrukturen auf tiefer Ebene vergleicht und bei Unterschieden in einen Fehlertyp aufgelöst wird. Damit gehen Sie über das hinaus, was eine einfache Annotation erkennt.

type SameKeys<A, B> =
  keyof A extends keyof B
    ? keyof B extends keyof A ? true : false
    : false;

Schlüssel einmal ableiten

Da alle Locales Base gemeinsam haben, wird der Schlüsselpfadtyp (aus der vorherigen Lektion) einmal aus Base berechnet und für jedes Locale wiederverwendet. Dadurch ist die Typisierung von t Locale-unabhängig.

type Key = LeafPaths<Base>;
// same valid keys regardless of active locale

Locale-Auswahl zur Laufzeit

Zur Laufzeit greifen Sie über das aktive Locale auf die Registry zu. Das Typsystem hat bereits garantiert, dass jedes Locale dieselben Schlüssel besitzt, daher sind die Zugriffe sicher.

function translate(locale: keyof typeof locales, key: Key): string {
  return getPath(locales[locale], key);
}

Fehlende Schlüssel in Locales erkennen

Wenn Sie nicht jede Datei direkt annotieren können (z. B. bei JSON-Imports), vergleicht eine Typprüfung zur Buildzeit jedes importierte Locale mit Base und gibt einen Diff-Typ aus, der die fehlenden Schlüssel auflistet.

type Missing<L> = Exclude<keyof Base, keyof L>;
type TrMissing = Missing<typeof tr>; // never if complete

Warum das wichtig ist

Ungetypte i18n driftet auseinander: Ein zu en hinzugefügter Schlüssel wird in de vergessen, sodass ein leerer oder englischer String ausgeliefert wird. Wenn Sie jedes Locale auf eine gemeinsame Basisstruktur einschränken, wird dieses Versäumnis zu einem Compile-Fehler, sodass alle Locales vollständig und konsistent bleiben.

Kurzer Test

Bestätigen Sie Ihr Verständnis der Locale-spezifischen Typinferenz.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben ein Basis-Locale als kanonische Struktur ausgewählt und jedes andere Locale darauf eingeschränkt, sodass fehlende oder zusätzliche Schlüssel die Kompilierung verhindern. Ein defineLocale-Helper und eine eingeschränkte Registry halten alle Locales strukturell identisch, und Schlüsselpfade werden einmal aus der Basisstruktur abgeleitet.

Kostenlos starten

Lerne TypeScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 101
Lektionen: 352

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Locale-bewusste Typinferenz“ kostenlos?

Ja — der vollständige Text von „Locale-bewusste Typinferenz“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Locale-bewusste Typinferenz“?

Stellen Sie sicher, dass alle Locales dieselbe Schlüsselstruktur verwenden. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Locale-bewusste Typinferenz“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy