TypeScript Academy · Lektion

Typbestämning av översättningsnycklar

Härled en union av giltiga nycklar från meddelandefiler.

Lektion 1 av 413 steg

Typbestämning av översättningsnycklar är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Härleda giltiga översättningsnycklar

I en typsäker i18n-konfiguration härleds mängden giltiga översättningsnycklar från ert meddelandeobjekt. Ett skrivfel som t("greetng") blir ett kompileringsfel i stället för ett fel med en saknad sträng vid körning.

Ett meddelandeobjekt

Börja med ett vanligt objekt med meddelanden. Det är den enda källan till sanning för både värdena och nyckeltypen.

const messages = {
  greeting: "Hello",
  farewell: "Goodbye",
  cart: {
    empty: "Your cart is empty",
    checkout: "Proceed to checkout",
  },
} as const;

Nycklar på toppnivå med keyof

För ett platt objekt ger keyof typeof unionen av nycklarna.

type TopKeys = keyof typeof messages;
// "greeting" | "farewell" | "cart"

Problemet med nästlade objekt

Verkliga meddelandekataloger är nästlade. Vi vill ha punktseparerade sökvägar som "cart.empty", inte bara nycklar på toppnivå. Vi behöver en rekursiv typ som går igenom objektet.

En rekursiv sökvägstyp

En villkorstyp tillsammans med en mappad typ bygger punktseparerade sökvägar genom att rekursivt gå in i nästlade objekt och lägga till prefix framför nycklarna. Prefixet använder en template literal-typ, som i riktig kod skrivs med backticks som [backtick]${K}.${Paths<T[K]>}[backtick]. Nedan visar vi den som JoinPath(K, child) för att hålla kodexemplet rent.

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];

Tillämpa den

När meddelandetypen skickas till Paths erhålls alla giltiga punktseparerade nycklar.

type MsgKey = Paths<typeof messages>;
// "greeting" | "farewell" | "cart" | "cart.empty" | "cart.checkout"

Endast lövnycklar

Ofta vill ni bara ha löv-sökvägarna, alltså de faktiska strängarna, och utesluta mellanliggande objekt. Justera rekursionen så att noder som inte är strängar hoppas över. Prefixet med K, punkt och underordnad sökväg använder återigen en template literal-typ, som i riktig kod avgränsas med backticks och här visas som JoinPath.

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"

En typad t-funktion

Begränsa översättningsfunktionens parameter till den härledda nyckelunionen så att endast giltiga nycklar kan kompileras.

declare function t(key: LeafPaths<typeof messages>): string;

t("cart.empty");   // ok
t("cart.missing"); // Error: not a valid key

Härleda värdetypen

Ni kan gå ett steg längre och härleda värdetypen vid en sökväg, vilket är användbart när meddelanden innehåller poster som inte är strängar. En villkorstyp som indexerar sökvägar går igenom punkterna. Den delar upp sökvägen med ett template literal-mönster som i riktig kod skrivs med backticks som formen Head punkt Rest med infer. Nedan betecknar vi den uppdelningen som 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;

Varför as const är viktigt

Utan as const breddas strängvärden till string, och ni förlorar den literalinformation som behövs senare, till exempel för att hitta platshållare. Deklarera alltid kataloger som const.

Varför det här är viktigt

Att härleda nycklar från katalogen innebär att en tillagd, omdöpt eller borttagen meddelandepost omedelbart uppdaterar den tillåtna nyckeltypen överallt. Ingen central enum att underhålla och inga inaktuella strängkonstanter.

Snabbkontroll

Bekräfta er förståelse av typning av översättningsnycklar.

Sammanfattning

Ni härledde en union av giltiga nycklar från ett messages-objekt med hjälp av keyof och en rekursiv template literal-baserad sökvägstyp. Varianter med endast löv utesluter mellanliggande objekt, en typad t avvisar ogiltiga nycklar, och as const bevarar den literalinformation som typmekanismen behöver.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
101
Lektioner
352

Vanliga frågor

Är lektionen ”Typbestämning av översättningsnycklar” gratis?

Ja – hela texten till ”Typbestämning av översättningsnycklar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Typbestämning av översättningsnycklar”?

Härled en union av giltiga nycklar från meddelandefiler. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Typbestämning av översättningsnycklar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Typbestämning av översättningsnycklar
  2. Typsäkerhet för interpolation
  3. Pluralisering med typer
  4. Lokalanpassad typinferens
← Tillbaka till TypeScript Academy