TypeScript Academy · Lekcja

satisfies a adnotacja typu

Zachowuj wnioskowanie literałów, jednocześnie sprawdzając kształt

satisfies a adnotacja typu to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 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.

Wzorzec z adnotacją

Klasyczny wzorzec const config: Type = {...} sprawdza poprawność obiektu, ale typ zmiennej staje się równy Type, co poszerza wszystkie zawarte w nim literały.

type Config = { mode: string; level: number };
const config: Config = { mode: "dark", level: 5 };
// config.mode has type string
console.log(config.mode);

Jak wygląda poszerzanie typu

Przy zastosowaniu adnotacji config.mode ma typ string. Nie można przypisać go do zmiennej oczekującej wartości literalnej "dark".

type Config = { mode: string };
const config: Config = { mode: "dark" };
// const m: "dark" = config.mode; // Error: string not assignable to "dark"
console.log(config.mode);

Wzorzec satisfies

W przypadku const config = {...} satisfies Type zmienna zachowuje swój dokładny wywnioskowany typ, a jednocześnie jest sprawdzana względem Type.

type Config = { mode: string; level: number };
const config = { mode: "dark", level: 5 } satisfies Config;
// config.mode has type "dark"
console.log(config.mode);

Zachowanie dokładnego wnioskowania

Teraz config.mode ma wartość literalną "dark", więc działa wszędzie tam, gdzie wymagany jest wąski typ.

type Config = { mode: string };
const config = { mode: "dark" } satisfies Config;
const m: "dark" = config.mode; // OK
console.log(m);

Oba podejścia nadal sprawdzają poprawność

Oba wzorce odrzucają nieprawidłowe obiekty. Różnica dotyczy wyłącznie wynikowego typu zmiennej, a nie tego, czy walidacja jest wykonywana.

type Config = { level: number };
// const a: Config = { level: "x" }; // Error
// const b = { level: "x" } satisfies Config; // Error
const ok = { level: 3 } satisfies Config;
console.log(ok.level);

Wykrywanie dodatkowych właściwości

Podobnie jak adnotacje, satisfies sygnalizuje nadmiarowe właściwości, których nie ma w typie docelowym, pomagając wykrywać literówki w kluczach.

type Config = { mode: string };
// const c = { mode: "dark", extar: true } satisfies Config; // Error: extar
const c = { mode: "dark" } satisfies Config;
console.log(c.mode);

Zachowanie krotki

satisfies pomaga także zachować precyzję tablic przypominających krotki, gdy jest używane razem z as const, a jednocześnie nadal sprawdza typy elementów.

type Nums = readonly number[];
const xs = [1, 2, 3] as const satisfies Nums;
// xs is a readonly tuple [1, 2, 3], validated as numbers
console.log(xs.length);

Adnotacja poszerza elementy unii

Jeśli pole jest unią taką jak "a" | "b", adnotacja o typie będącym tą unią zachowuje typ unii, ale szerszy typ pola powoduje jego poszerzenie. satisfies przypisuje konkretny element unii.

type Config = { tier: string };
const withAnn: Config = { tier: "pro" };       // tier: string
const withSat = { tier: "pro" } satisfies Config; // tier: "pro"
console.log(withAnn.tier, withSat.tier);

Zachowanie autouzupełniania przy odczycie

Ponieważ satisfies zachowuje literalne klucze i wartości, edytory mogą podpowiadać na podstawie dokładnego obiektu, a nie szerszego zadeklarowanego typu.

type Theme = Record<string, string>;
const theme = { bg: "black", fg: "white" } satisfies Theme;
// theme.<autocomplete shows bg and fg>
console.log(theme.bg, theme.fg);

Wybór między podejściami

Proszę używać zwykłej adnotacji, gdy rzeczywiście potrzebny jest szerszy typ. Proszę używać satisfies, gdy potrzebna jest walidacja, ale później także precyzyjny wywnioskowany kształt.

type Config = { mode: string };
// Want wide type for reassignment flexibility -> annotation
let a: Config = { mode: "dark" };
// Want exact literals for later indexing -> satisfies
const b = { mode: "dark" } satisfies Config;
console.log(a.mode, b.mode);

Podsumowanie obok siebie

Adnotacja poszerza typ, a satisfies go zachowuje. Oba podejścia zapewniają walidację. W przypadku niezmiennych konfiguracji, z których odczytuje się dane, satisfies jest zwykle lepszym wyborem domyślnym.

type C = { color: string; size: number };
const widened: C = { color: "red", size: 1 };
const exact = { color: "red", size: 1 } satisfies C;
console.log(widened.color, exact.color);

Szybki test: satisfies a adnotacja

Proszę sprawdzić, czy rozumie Pan/Pani różnicę między tymi podejściami.

Podsumowanie: satisfies a adnotacja typu

Adnotacja typu sprawdza poprawność, ale poszerza literały do ich typów bazowych. Operator satisfies sprawdza poprawność i zachowuje dokładne wnioskowanie, w tym wartości literalne, klucze oraz precyzję krotek.

type C = { mode: string };
const c = { mode: "dark" } satisfies C;
const exact: "dark" = c.mode;
console.log(exact);

Często zadawane pytania

Czy lekcja „satisfies a adnotacja typu” jest bezpłatna?

Tak — pełny tekst „satisfies a adnotacja typu” 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 „satisfies a adnotacja typu”?

Zachowuj wnioskowanie literałów, jednocześnie sprawdzając kształt Ć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 2 z 4.

Ile czasu zajmuje lekcja „satisfies a adnotacja typu”?

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