TypeScript Academy · Lekcja

Praktyczne wzorce satisfies

Stosuj satisfies do obiektów konfiguracji i tabel mapujących

Praktyczne wzorce satisfies to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Walidacja palety kolorów

Typowym wzorcem dla palety jest satisfies Record<string, Color>: każda wartość jest sprawdzana pod kątem poprawności koloru, a klucze pozostają dokładne, co umożliwia autouzupełnianie.

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

Wykrywanie nieprawidłowych wartości palety

Jeśli wartość nie jest prawidłowym Color, satisfies zgłasza błąd, a klucze pozostają precyzyjnie typowane.

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

Zachowanie autouzupełniania kluczy

Ponieważ wywnioskowane klucze mają typ "primary" | "secondary", edytor podpowiada je automatycznie. Zwykła adnotacja Record utraciłaby informacje o konkretnych kluczach.

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

Walidacja mapy tras

Mapy tras również na tym korzystają: wartości muszą pasować do kształtu handlera, a nazwy tras pozostają znane dla pomocniczych funkcji nawigacyjnych.

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

Indeksowanie mapy

Dzięki zachowaniu kluczy można utworzyć typ prawidłowych nazw tras i bezpiecznie typować dostęp do mapy.

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

Typowana konfiguracja z różnymi wartościami

satisfies działa również wtedy, gdy wartości mają różne kształty. Należy zastosować typ unii jako ograniczenie — każda wartość zostanie względem niego sprawdzona.

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

Tablice wyszukiwania przypominające enum

Można utworzyć tablicę wyszukiwania sprawdzaną względem typu wartości, zachowując jednocześnie dokładny typ każdego wpisu do późniejszego wykorzystania.

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

Połączenie z as const

Połączenie as const i satisfies pozwala uzyskać głęboko niezmienne, zwalidowane dane: as const je zamraża, a satisfies sprawdza.

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

Walidacja zakresów liczbowych za pomocą typu

Wartości można ograniczyć do unii literałów liczbowych, aby modelować stałe zestawy opcji sprawdzane już w momencie definicji.

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

Mapa flag funkcji

Praktyczna konfiguracja flag funkcji: klucze to nazwy flag z autouzupełnianiem, a wartości to wartości logiczne sprawdzane przez satisfies.

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

Dlaczego ten wzorzec jest najlepszy

W przypadku palet, tras i flag wzorzec satisfies Record<...> zapewnia zwalidowane wartości oraz precyzyjne klucze i literały — to idealne rozwiązanie do codziennego typowania konfiguracji.

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

Szybki test: praktyczne zastosowania satisfies

Proszę sprawdzić, czy rozumie Pan/Pani praktyczne wzorce użycia satisfies.

Podsumowanie: praktyczne wzorce satisfies

Zastosował Pan/Zastosowała Pani satisfies Record<string, Color> do palet, map tras, flag i tablic wyszukiwania, zachowując dokładne klucze oraz literały na potrzeby autouzupełniania i sprawdzając każdą wartość.

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

Często zadawane pytania

Czy lekcja „Praktyczne wzorce satisfies” jest bezpłatna?

Tak — pełny tekst „Praktyczne wzorce satisfies” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Praktyczne wzorce satisfies”?

Stosuj satisfies do obiektów konfiguracji i tabel mapujących Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Praktyczne wzorce satisfies”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do TypeScript Academy