TypeScript Academy · Lektion

Typsäkerhet för interpolation

Extrahera och kräv interpoleringsvariabler från strängar.

Lektion 2 av 413 steg

Typsäkerhet för interpolation är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 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.

Typsäker interpolation

Meddelanden innehåller ofta platshållare som "Hello, {name}". Typsäker i18n extraherar dessa platshållarnamn från meddelandets strängtyp och kräver att ni skickar matchande argument.

Målet

Utifrån literaltypen för ett meddelande vill vi beräkna objektet med de variabler som behövs, så att t("greet", { name: "Ada" }) krävs och ett saknat name blir ett kompileringsfel.

Extrahera en platshållare

En villkorstyp med template literal hämtar variabelnamnet från en sträng med en enda platshållare. I riktig kod skrivs mönstret med backticks som: sträng, vänsterklammerparentes, infer V, högerklammerparentes, sträng. Nedan betecknar vi den matcharen som BraceMatch.

// Real TS pattern (backtick template literal):
//   matches any text, then {V}, then any text; infers V.

type Var<S extends string> =
  S extends BraceMatch<infer V> ? V : never;

type A = Var<"Hello, {name}">; // "name"

Extrahera flera platshållare

Rekursera för att samla varje platshållare i en union. Mönstret fångar en variabel tillsammans med resten av texten och rekurserar sedan över resten.

// Pattern: any text, {V}, then Rest tail -- infer V and Rest.

type Vars<S extends string> =
  S extends BraceMatchRest<infer V, infer Rest>
    ? V | Vars<Rest>
    : never;

type B = Vars<"Hi {first} {last}!">; // "first" | "last"

Från namn till ett args-objekt

Omvandla namnunionen till en obligatorisk objekttyp med en mappad typ.

type ArgsOf<S extends string> = {
  [K in Vars<S>]: string | number;
};

type G = ArgsOf<"Hello, {name}">;
// { name: string | number }

Inga platshållare, inga argument

När ett meddelande inte har några platshållare är Vars never, så args-objektet är tomt. Då kan vi göra args-parametern valfri.

type C = Vars<"Goodbye">;       // never
type D = ArgsOf<"Goodbye">;     // {} (empty)

En typad översättningsfunktion

Gör args-parametern beroende av den valda nyckeln genom att slå upp meddelandeliteralen och beräkna dess argument.

declare const messages: {
  greet: "Hello, {name}";
  invite: "Join {count} others";
};

declare function t<K extends keyof typeof messages>(
  key: K,
  args: ArgsOf<(typeof messages)[K]>
): string;

Så fungerar tvingande typkontroll

Kompilatorn kräver nu exakt de variabler som varje meddelande deklarerar.

t("greet", { name: "Ada" });   // ok
t("greet", {});                 // Error: name is missing
t("invite", { count: 3 });      // ok
t("invite", { name: "x" });     // Error: count missing, name unexpected

Valfria argument för meddelanden utan platshållare

Använd en villkorad överlagring så att meddelanden utan platshållare inte behöver något andra argument alls.

type MaybeArgs<S extends string> =
  Vars<S> extends never ? [] : [args: ArgsOf<S>];

declare function t2<K extends keyof typeof messages>(
  key: K,
  ...rest: MaybeArgs<(typeof messages)[K]>
): string;

Anpassade avgränsare

Om katalogen använder {{name}} eller %{name} justerar ni template literal-mönstret i Vars på motsvarande sätt. Tekniken är densamma; det är bara de omgivande litteralerna som ändras.

Varför detta är viktigt

Saknade eller felstavade interpoleringsvariabler är en klassisk källa till trasiga UI-strängar ("Hello, undefined"). Genom att extrahera dem på typnivå blir sådana fel kompileringsfel, och varje meddelandekontrakt dokumenteras.

Snabbtest

Testa förståelsen av typsäker interpolering.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Genom att mönstermatcha meddelandens literaltyper med malliteraler och infer extraheras platshållarnamn till en union, de mappas till ett obligatoriskt args-objekt och translate-funktionen kräver exakt dessa variabler – valfritt när det inte finns några.

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Typsäkerhet för interpolation” gratis?

Ja – hela texten till ”Typsäkerhet för interpolation” 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 ”Typsäkerhet för interpolation”?

Extrahera och kräv interpoleringsvariabler från strängar. 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 2 av 4.

Hur lång tid tar lektionen ”Typsäkerhet för interpolation”?

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

← Tillbaka till TypeScript Academy