TypeScript Academy · Les

Localebewuste type-inferentie

Zorg dat alle locales dezelfde sleutelstructuur delen

Les 4 van 413 stappen

Localebewuste type-inferentie is een gratis TypeScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

Type-inferentie met inzicht in locale's

Een app wordt geleverd met meerdere locale's (en, tr, de...). We willen een type dat een fout geeft als een locale sleutels mist die in de basis aanwezig zijn, zodat vertalingen nooit ongemerkt uit de pas lopen.

Een basis-locale

Kies één locale, meestal en, als de canonieke sleutelstructuur. Elke andere locale moet dezelfde vorm hebben.

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

type Base = typeof en;

Andere locale's beperken

Geef elke extra locale de vorm van de basis. Een ontbrekende sleutel is nu een compileerfout in het bestand van die locale.

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

Extra sleutels ook detecteren

Als je het basistype als annotatie gebruikt, worden ook onbekende sleutels gemarkeerd die wel in een locale staan maar niet in de basis. Zo detecteer je achtergebleven of verkeerd gespelde vermeldingen.

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

Een helper om locale's te definiëren

Een generieke helper dwingt de vorm af en behoudt tegelijkertijd elke waarde, zodat je elke locale op een overzichtelijke plek kunt definiëren.

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

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

Een register met alle locale's

Verzamel locale's in een record. Door elke waarde te beperken tot Base, garandeer je een uniforme structuur in de hele app.

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

Gelijkheid op typeniveau (diepgaand)

Voor strengere garanties kun je een type SameKeys maken dat sleutelstructuren diepgaand vergelijkt en bij verschillen een fouttype oplevert. Dat gaat verder dan wat een gewone annotatie detecteert.

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

Sleutels eenmalig afleiden

Omdat alle locale's Base delen, wordt het type voor het sleutelpad, uit de eerdere les, één keer uit Base berekend en voor elke locale hergebruikt. Daardoor is de typecontrole van t onafhankelijk van de locale.

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

De locale tijdens uitvoering selecteren

Tijdens de uitvoering indexeer je het register met de actieve locale. Het typesysteem heeft al gegarandeerd dat elke locale dezelfde sleutels heeft, dus opzoekingen zijn veilig.

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

Ontbrekende sleutels in locale's detecteren

Als je niet elk bestand rechtstreeks kunt annoteren, bijvoorbeeld bij JSON-imports, vergelijkt een typecontrole tijdens het bouwen elke geïmporteerde locale met Base en toont die een verschiltype met de ontbrekende sleutels.

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

Waarom dit belangrijk is

i18n zonder typen raakt uit de pas: een sleutel die aan en wordt toegevoegd, wordt vergeten in de, waardoor een lege of Engelse tekenreeks wordt meegeleverd. Door elke locale aan een gedeelde basis te binden, wordt die omissie een compileerfout en blijven alle locale's volledig en consistent.

Korte controle

Bevestig je begrip van locale-bewuste inferentie.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt een basis-locale als canonieke vorm gekozen en elke andere locale daaraan gebonden, zodat ontbrekende of extra sleutels niet compileren. Een defineLocale-helper en een beperkt register houden alle locale's structureel identiek, en sleutel paden worden één keer uit de basis afgeleid.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 101
Lessen: 352

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Localebewuste type-inferentie” gratis?

Ja — de volledige tekst van “Localebewuste type-inferentie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Localebewuste type-inferentie”?

Zorg dat alle locales dezelfde sleutelstructuur delen Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Localebewuste type-inferentie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar TypeScript Academy