Mechanizmy rozszerzania i zawężania typów
Dowiedz się, jak TypeScript rozszerza typy i kiedy temu zapobiegać.
Mechanizmy rozszerzania i zawężania typów to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 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.
Czym jest rozszerzanie typów
Rozszerzanie typu zachodzi, gdy TypeScript wnioskuje szerszy typ niż ten, który został zapisany. Przypisanie let x = "hello" rozszerza typ do string, a nie do typu literału "hello".
let x = "hello"; // inferred: string, not "hello"
let y = 42; // inferred: number, not 42Rozszerzanie typów dla let i const
Zmienne zadeklarowane za pomocą const zachowują typ literału, ponieważ nie można ich ponownie przypisać. let rozszerza typ do typu bazowego.
const a = "world"; // type: "world"
let b = "world"; // type: stringZapobieganie rozszerzaniu za pomocą adnotacji typu
Jawne oznaczenie zmiennej let adnotacją typu zapobiega rozszerzeniu i zachowuje typ literału.
let direction: "left" | "right" = "left";
// direction = "up"; // Error: not assignableZawężanie za pomocą typeof
TypeScript zawęża typ unii wewnątrz sprawdzeń typeof, zapewniając precyzyjny typ w danej gałęzi.
function format(val: string | number) {
if (typeof val === "string") {
return val.toUpperCase(); // val: string here
}
return val.toFixed(2); // val: number here
}Zawężanie za pomocą sprawdzania równości
Sprawdzanie równości z wartościami literałowymi również zawęża typ wewnątrz gałęzi.
type Direction = "left" | "right" | "up";
function handle(dir: Direction) {
if (dir === "left") {
console.log("Going left"); // dir: "left"
}
}Analiza przepływu sterowania
TypeScript śledzi przypisania w przepływie sterowania i zawęża typ po każdej gałęzi.
function process(x: string | null) {
if (x === null) return;
// x is string here — TypeScript knows null is ruled out
console.log(x.length);
}Rozszerzanie typów w literałach obiektowych
Wartości właściwości w literałach obiektowych również są rozszerzane, chyba że użyje się as const.
const config = { mode: "dark" };
// config.mode: string (widened)
const config2 = { mode: "dark" } as const;
// config2.mode: "dark" (literal)Świeżość a rozszerzanie typów
Po bezpośrednim przypisaniu literału obiektowego do zmiennej z określonym typem TypeScript sprawdza nadmiarowe właściwości — jednak po rozszerzeniu literału do nazwanej zmiennej to sprawdzenie przestaje obowiązywać.
interface Options { timeout: number; }
const opts = { timeout: 3000, retry: true };
// No error — widened type, excess property check skipped
const o: Options = opts;Zawężanie za pomocą operatora in
Operator in zawęża unie typów obiektowych, sprawdzając, czy dana właściwość istnieje.
type Cat = { meow(): void };
type Dog = { bark(): void };
function speak(animal: Cat | Dog) {
if ("meow" in animal) animal.meow();
else animal.bark();
}Zawężanie za pomocą funkcji asercji
Funkcje asercji używają typów zwracanych asserts condition, aby zawężać typ po wywołaniu.
function assertString(val: unknown): asserts val is string {
if (typeof val !== "string") throw new Error("Expected string");
}
const x: unknown = "hi";
assertString(x);
x.toUpperCase(); // OK — narrowed to stringPodsumowanie: rozszerzanie a zawężanie
Rozszerzanie typów zwiększa szerokość wnioskowanych typów dla większej elastyczności, a zawężanie doprecyzowuje szeroki typ wewnątrz warunkowej gałęzi. Zrozumienie obu mechanizmów pomaga pisać bezpieczniejszy kod TypeScript.
Szybkie sprawdzenie
Która deklaracja zapobiega rozszerzeniu do typu bazowego?
Czego się nauczono
Znają już Państwo rozszerzanie typów, czyli sposób, w jaki TypeScript poszerza wnioskowane typy, oraz zawężanie, czyli sposób, w jaki sprawdzenia warunkowe tworzą precyzyjne typy. Należy używać as const, aby zapobiegać rozszerzaniu, oraz sprawdzeń przepływu sterowania, aby bezpiecznie zawężać unie.
Ucz się TypeScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 101
- Lekcje
- 352
Często zadawane pytania
Czy lekcja „Mechanizmy rozszerzania i zawężania typów” jest bezpłatna?
Tak — pełny tekst „Mechanizmy rozszerzania i zawężania typów” 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 „Mechanizmy rozszerzania i zawężania typów”?
Dowiedz się, jak TypeScript rozszerza typy i kiedy temu zapobiegać. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Mechanizmy rozszerzania i zawężania typów”?
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
- Mechanizmy rozszerzania i zawężania typów
- Typowanie kontekstowe: wnioskowanie z kontekstu
- Świeżość i sprawdzanie nadmiarowych właściwości
- Asercje const i as const