TypeScript Academy · Les

Praktische satisfies-patronen

Pas satisfies toe op configuratieobjecten en opzoektabellen

Les 4 van 413 stappen

Praktische satisfies-patronen 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.

Een kleurenpalet valideren

Een veelgebruikte aanpak voor een palet is satisfies Record<string, Color>: elke waarde wordt gecontroleerd op een geldige kleur, terwijl de sleutels exact blijven voor automatische aanvulling.

type Color = "red" | "green" | "blue";
const palette = {
  primary: "blue",
  secondary: "green"
} satisfies Record<string, Color>;
console.log(palette.primary);

Ongeldige paletwaarden vinden

Als een waarde geen geldige Color is, geeft satisfies een foutmelding, terwijl de sleutels precies getypeerd blijven.

type Color = "red" | "green" | "blue";
// const bad = { primary: "purple" } satisfies Record<string, Color>; // Error
const ok = { primary: "red" } satisfies Record<string, Color>;
console.log(ok.primary);

Automatische aanvulling voor sleutels behouden

Omdat de afgeleide sleutels "primary" | "secondary" zijn, vult je editor ze automatisch aan. Dat gebeurt niet bij een gewone Record-annotatie, die de specifieke sleutels zou verliezen.

type Color = "red" | "green" | "blue";
const palette = { primary: "red", accent: "blue" } satisfies Record<string, Color>;
// palette.<autocomplete: primary, accent>
console.log(palette.accent);

Een routetabel valideren

Ook routetabellen hebben hier baat bij: waarden moeten overeenkomen met de vorm van een handler, terwijl routenamen bekend blijven voor navigatiehulpfuncties.

type Route = { method: "GET" | "POST"; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  login: { method: "POST", path: "/login" }
} satisfies Record<string, Route>;
console.log(routes.login.method);

In de tabel indexeren

Met behouden sleutels kun je een type van geldige routenamen maken en typeveilig in het type van de tabel indexeren.

type Route = { method: string; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  about: { method: "GET", path: "/about" }
} satisfies Record<string, Route>;
type RouteName = keyof typeof routes; // "home" | "about"
const pick: RouteName = "about";
console.log(routes[pick].path);

Getypeerde configuratie met gemengde waarden

satisfies werkt ook wanneer waarden verschillende vormen hebben. Beperk ze met een unietype en elke waarde wordt daaraan getoetst.

type Setting = number | boolean | string;
const config = {
  retries: 3,
  verbose: true,
  region: "eu"
} satisfies Record<string, Setting>;
console.log(config.retries, config.verbose);

Enumeratieachtige opzoektabellen

Bouw een opzoektabel die aan een waardetype wordt getoetst, terwijl elke invoer exact blijft voor later gebruik.

type Status = "active" | "inactive";
const userStatus = {
  alice: "active",
  bob: "inactive"
} satisfies Record<string, Status>;
const s: "active" = userStatus.alice;
console.log(s);

Combineren met as const

Combineer as const en satisfies voor diep onveranderlijke, gevalideerde gegevens: as const maakt ze onveranderlijk en satisfies controleert ze.

type Color = "red" | "blue";
const theme = {
  primary: "red",
  secondary: "blue"
} as const satisfies Record<string, Color>;
console.log(theme.primary);

Numerieke bereiken per type valideren

Je kunt waarden beperken tot een unie van numerieke letterlijke waarden om vaste optiesets te modelleren, die tijdens het definiëren worden gevalideerd.

type Level = 1 | 2 | 3;
const levels = {
  easy: 1,
  medium: 2,
  hard: 3
} satisfies Record<string, Level>;
console.log(levels.hard);

Een kaart met functievlaggen

Een praktische configuratie met functievlaggen: de namen van de vlaggen worden automatisch aangevuld in je editor en de waarden zijn booleans die door satisfies worden gevalideerd.

const flags = {
  newDashboard: true,
  betaSearch: false
} satisfies Record<string, boolean>;
type Flag = keyof typeof flags;
const f: Flag = "betaSearch";
console.log(flags[f]);

Waarom deze aanpak wint

Voor kleurenpaletten, routes en vlaggen biedt satisfies Record<...> gevalideerde waarden plus precieze sleutels en letterlijke waarden: de praktische gulden middenweg voor getypeerde configuratie.

type Color = "red" | "green" | "blue";
const ui = { brand: "green", warn: "red" } satisfies Record<string, Color>;
console.log(Object.keys(ui).join(","));

Korte toets: satisfies in de praktijk

Toets je begrip van praktische satisfies-aanpakken.

Beantwoord dit in de interactieve les

Samenvatting: praktische satisfies-aanpakken

Je hebt satisfies Record<string, Color> toegepast op kleurenpaletten, routetabellen, vlaggen en opzoektabellen. Daarbij bleven de exacte sleutels en letterlijke waarden beschikbaar voor automatische aanvulling, terwijl elke waarde werd gevalideerd.

type Color = "red" | "blue";
const theme = { bg: "blue", fg: "red" } satisfies Record<string, Color>;
console.log(theme.bg, theme.fg);

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 “Praktische satisfies-patronen” gratis?

Ja — de volledige tekst van “Praktische satisfies-patronen” 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 “Praktische satisfies-patronen”?

Pas satisfies toe op configuratieobjecten en opzoektabellen 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 “Praktische satisfies-patronen”?

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