TypeScript Academy · Lekcja

Unie stringów i autouzupełnianie

Uzyskuj autouzupełnianie znanych wartości stringów w edytorze

Unie stringów i autouzupełnianie to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 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.

Unie napędzają autouzupełnianie

Unia literałów stringowych pełni podwójną funkcję: ogranicza dozwolone wartości i zasila autouzupełnianie w edytorze. Czasami jednak potrzebne są zarówno podpowiedzi, jak i możliwość przekazania dowolnego stringa — sprytna sztuczka pozwala osiągnąć oba cele.

Podstawowa unia literałów stringowych

Należy zadeklarować unię dozwolonych stringów. Edytor oferuje dokładnie te opcje, a nieprawidłowe wartości powodują błędy kompilacji.

type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Error

Autouzupełnianie w edytorze

Gdy parametr jest unią literałów stringowych, wpisywanie wartości w wywołaniu powoduje wyświetlenie dokładnie jej elementów. To jedna z najbardziej cenionych wygód TypeScript.

type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blue

Ograniczenie

Ścisła unia zabrania używania wartości spoza listy. Czasami potrzebne jest sugerowanie popularnych wartości przy jednoczesnym dopuszczeniu dowolnych własnych stringów — zwykła unia nie potrafi zapewnić obu tych funkcji.

type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))

Rozszerzenie typu pozbawia podpowiedzi

Jeśli po prostu użyją Państwo string, każda wartość będzie dozwolona, ale autouzupełnianie całkowicie zniknie. W zamian za pełną elastyczność tracą Państwo wszystkie podpowiedzi — nie jest to rozwiązanie idealne.

function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestions

Sztuczka z string i unią literałów

Sztuczka polega na połączeniu literałów z string & {} za pomocą unii. Literały nadal pojawiają się w autouzupełnianiu, a string & {} dopuszcza każdy inny string bez redukowania unii.

type Color = "red" | "green" | (string & {})
const a: Color = "red"        // suggested
const b: Color = "#ff8800"    // also allowed
console.log(a, b)

Dlaczego string i pusty obiekt działają

Zwykle 'red' | string upraszcza się do samego string, usuwając literały. Przecięcie z {} tworzy nieco inny typ, który TypeScript zachowuje osobno, dzięki czemu literały pozostają dostępne jako podpowiedzi, a każdy string nadal pasuje.

type A = "red" | string          // collapses to string — no hints
type B = "red" | (string & {})   // keeps "red" as a suggestion
const x: B = "red"
console.log(x)

Pomocniczy typ wielokrotnego użytku

Należy opakować tę sztuczkę w generyczny alias, aby jej przeznaczenie było jasne i można było używać jej ponownie w całej bazie kodu.

type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)

Zastosowanie w funkcji

Należy użyć pomocnika w API, aby zapewnić wywołującym podpowiedzi dotyczące często używanych danych wejściowych, jednocześnie akceptując wartości niestandardowe.

type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home"))     // suggested
console.log(setIcon("my-icon")) // allowed

Kiedy stosować tę sztuczkę

Warto po nią sięgnąć, gdy API ma dobrze znane wartości, ale musi pozostać otwarte: w przypadku nazw ikon, jednostek CSS, tokenów motywów czy presetów frameworków. Dla zbiorów zamkniętych należy preferować ścisłą unię zapewniającą pełne bezpieczeństwo.

type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)

Kompromisy

Sztuczka zachowuje podpowiedzi, ale zmniejsza bezpieczeństwo — literówki w niestandardowych stringach nie będą już wykrywane. Należy stosować ją świadomie tam, gdzie otwartość jest zaletą, a nie używać jej domyślnie.

type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat sztuczki z autouzupełnianiem.

Podsumowanie

Unie literałów stringowych zapewniają autouzupełnianie w edytorze i ograniczają wartości, ale ścisła unia zabrania własnych stringów, a zwykły string usuwa wszystkie podpowiedzi. Sztuczka T | (string & {}) zachowuje literały jako podpowiedzi, jednocześnie akceptując dowolny string. Należy opakować ją w pomocnik LiteralUnion<T> i stosować wyłącznie tam, gdzie otwartość jest zamierzona — odbywa się to kosztem wykrywania literówek.

Często zadawane pytania

Czy lekcja „Unie stringów i autouzupełnianie” jest bezpłatna?

Tak — pełny tekst „Unie stringów i autouzupełnianie” 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 „Unie stringów i autouzupełnianie”?

Uzyskuj autouzupełnianie znanych wartości stringów w edytorze Ć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 3 z 4.

Ile czasu zajmuje lekcja „Unie stringów i autouzupełnianie”?

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