Übersetzungsschlüssel typisieren
Leiten Sie aus Nachrichtendateien eine Union gültiger Schlüssel ab.
Übersetzungsschlüssel typisieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Gültige Übersetzungsschlüssel ableiten
In einer typsicheren i18n-Konfiguration wird die Menge der gültigen Übersetzungsschlüssel aus Ihrem Nachrichtenobjekt abgeleitet. Ein Tippfehler wie t("greetng") führt dadurch zu einem Compilefehler und nicht zu einem Fehler wegen einer fehlenden Zeichenkette zur Laufzeit.
Ein Nachrichtenobjekt
Beginnen Sie mit einem einfachen Objekt aus Nachrichten. Es ist die einzige Quelle der Wahrheit sowohl für die Werte als auch für den Schlüsseltyp.
const messages = {
greeting: "Hello",
farewell: "Goodbye",
cart: {
empty: "Your cart is empty",
checkout: "Proceed to checkout",
},
} as const;Schlüssel der obersten Ebene mit keyof
Bei einem flachen Objekt liefert keyof typeof die Vereinigung seiner Schlüssel.
type TopKeys = keyof typeof messages;
// "greeting" | "farewell" | "cart"Das Problem verschachtelter Objekte
Nachrichtenkataloge sind in der Praxis verschachtelt. Wir möchten Pfade mit Punkten wie "cart.empty" und nicht nur Schlüssel der obersten Ebene. Dafür benötigen wir einen rekursiven Typ, der das Objekt durchläuft.
Ein rekursiver Pfadtyp
Ein Conditional Type in Kombination mit einem Mapped Type erstellt durch Rekursion in verschachtelte Objekte Pfade mit Punkten und stellt den Schlüsseln Präfixe voran. Das Präfix verwendet einen Template-Literal-Typ, der im echten Code mit Backticks als [backtick]${K}.${Paths<T[K]>}[backtick] geschrieben wird. Zur besseren Lesbarkeit der Auflistung zeigen wir ihn weiter unten als JoinPath(K, child).
type JoinPath<K extends string, Rest extends string> = K + "." + Rest;
// (Real TS uses a template literal type:
// the K dot Rest pattern delimited by backticks.)
type Paths<T> = {
[K in keyof T & string]: T[K] extends string
? K
: K | (T[K] extends object
? JoinPath<K, Paths<T[K]>>
: never);
}[keyof T & string];Anwenden
Wenn Sie den Nachrichtentyp an Paths übergeben, erhalten Sie jeden gültigen Pfad mit Punkten.
type MsgKey = Paths<typeof messages>;
// "greeting" | "farewell" | "cart" | "cart.empty" | "cart.checkout"Nur Blatt-Schlüssel
Oft benötigen Sie nur die Blattpfade (die tatsächlichen Zeichenketten), ohne Zwischenobjekte. Passen Sie die Rekursion so an, dass nicht auf Zeichenketten abbildende Knoten übersprungen werden. Das Präfix aus K, Punkt und Unterpfad verwendet wieder einen Template-Literal-Typ (im echten Code mit Backticks begrenzt), der hier als JoinPath dargestellt wird.
type LeafPaths<T> = T extends string
? ""
: {
[K in keyof T & string]: T[K] extends string
? K
: JoinPath<K, LeafPaths<T[K]>>;
}[keyof T & string];
// "greeting" | "farewell" | "cart.empty" | "cart.checkout"Eine typisierte t-Funktion
Beschränken Sie den Parameter der Übersetzungsfunktion auf die abgeleitete Schlüsselvereinigung, damit nur gültige Schlüssel kompiliert werden.
declare function t(key: LeafPaths<typeof messages>): string;
t("cart.empty"); // ok
t("cart.missing"); // Error: not a valid keyDen Werttyp auflösen
Sie können noch weitergehen und den Werttyp an einem Pfad ableiten. Das ist nützlich, wenn Nachrichten auch Einträge enthalten, die keine Zeichenketten sind. Ein Conditional Type zur Pfadindizierung durchläuft die Punkte. Er teilt den Pfad mithilfe eines Template-Literal-Musters auf, das im echten Code mit Backticks als Form Head Punkt Rest mit infer geschrieben wird. Diese Aufteilung bezeichnen wir weiter unten als SplitHead/SplitRest.
// Conceptually: split "cart.empty" into Head="cart", Rest="empty"
// using a template literal pattern with infer.
type ValueAt<T, P extends string> =
P extends SplitHead<infer Head, infer Rest>
? Head extends keyof T ? ValueAt<T[Head], Rest> : never
: P extends keyof T ? T[P] : never;Warum as const wichtig ist
Ohne as const werden Zeichenkettenwerte zu string erweitert, und Sie verlieren die später benötigten Literalinformationen, zum Beispiel zum Extrahieren von Platzhaltern. Deklarieren Sie Kataloge immer als const.
Warum das wichtig ist
Wenn Sie die Schlüssel aus dem Katalog ableiten, wird der erlaubte Schlüsseltyp überall sofort aktualisiert, sobald Sie eine Nachricht hinzufügen, umbenennen oder entfernen. Sie müssen kein zentrales Enum pflegen und sich nicht um veraltete Zeichenkettenkonstanten kümmern.
Kurzer Test
Überprüfen Sie Ihr Verständnis der Typisierung von Übersetzungsschlüsseln.
Zusammenfassung
Sie haben mithilfe von keyof und einem rekursiven Template-Literal-Pfadtyp eine Vereinigung gültiger Schlüssel aus einem messages-Objekt abgeleitet. Varianten, die nur Blattpfade berücksichtigen, schließen Zwischenobjekte aus, ein typisiertes t lehnt ungültige Schlüssel ab, und as const bewahrt die Literalinformationen, die die Typmechanismen benötigen.
Häufig gestellte Fragen
Ist die Lektion „Übersetzungsschlüssel typisieren“ kostenlos?
Ja — der vollständige Text von „Übersetzungsschlüssel typisieren“ 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 „Übersetzungsschlüssel typisieren“?
Leiten Sie aus Nachrichtendateien eine Union gültiger Schlüssel ab. 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 1 von 4.
Wie lange dauert die Lektion „Übersetzungsschlüssel typisieren“?
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
- Übersetzungsschlüssel typisieren
- Typsicherheit bei Interpolation
- Pluralisierung mit Typen
- Locale-bewusste Typinferenz