TypeScript Academy · Lekcja

Podstawy typów literałów szablonowych

Twórz typy stringów z unii i symboli zastępczych

Podstawy typów literałów szablonowych 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.

Stringi na poziomie typów

Typy literałów szablonowych tworzą nowe typy literałów stringowych przez łączenie innych typów stringowych. Używają tej samej składni backticków i symboli zastępowania co szablony stringów w czasie działania, ale operują wyłącznie na typach.

Prosty typ literału szablonowego

Proszę wyobrazić sobie alias typu Greeting zdefiniowany jako literał szablonowy zawierający tekst Hello, , a następnie symbol zastępowania dla typu Name. Jeśli Name jest literałem 'Ada', to Greeting jest typem literału 'Hello, Ada'.

type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)

Symbole zastępowania osadzają inne typy

W symbolu zastępowania można umieścić dowolny typ przypominający string: literał, parametr typu lub unię. TypeScript podstawia go do otaczającego tekstu, tworząc nowy typ literału.

type World = "World"
// A template literal type with text Hello,  and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)

Łączenie unii zwielokrotnia warianty

Gdy symbol zastępowania zawiera unię, szablon rozwija się dla każdego jej elementu. Szablon łączący 'a' | 'b' ze stałym sufiksem tworzy unię każdej możliwej kombinacji.

type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)

Wiele symboli zastępowania tworzy kombinacje

Dwa symbole zastępowania zawierające unie tworzą iloczyn kartezjański. Połączenie rozmiarów 'sm' | 'lg' z kolorami 'red' | 'blue' za pomocą separatora daje cztery typy literałów.

type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)

Dlaczego jest to przydatne

Typy literałów szablonowych pozwalają precyzyjnie opisywać całe rodziny stringów — nazwy klas CSS, nazwy zdarzeń czy ścieżki routingu — dzięki czemu kompilator odrzuca niepoprawne stringi przed uruchomieniem programu.

type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)

Liczby i wartości logiczne są konwertowane

Typy inne niż string umieszczone w typie literału szablonowego są konwertowane do postaci stringowej. Literał liczbowy 42 staje się tekstem 42 w wynikowym typie stringowym.

type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)

Użycie generycznego symbolu zastępowania

Funkcja generyczna może zbudować typ zwracany będący literałem szablonowym na podstawie typu literału swojego argumentu, dzięki czemu dokładny string jest znany w miejscu każdego wywołania.

function prefixed<T extends string>(s: T) {
  return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-home

Ograniczanie danych wejściowych

Można wymagać, aby wartość pasowała do typu literału szablonowego. Akceptowane są wyłącznie stringi zgodne z opisanym wzorcem, co pozwala wykrywać literówki podczas kompilacji.

type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignable

Szeroki string przełamuje wzorzec

Jeśli symbol zastępowania ma szeroki typ string, a nie typ literału, cały szablon zostaje zredukowany do string. Zachowanie szczegółowości wymaga danych wejściowych będących literałami, często uzyskiwanych za pomocą as const.

const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)

Gdzie ich używać

Typy literałów szablonowych sprawdzają się wszędzie tam, gdzie stringi mają określoną strukturę: w klasach narzędziowych CSS, identyfikatorach z prefiksami, kluczach zapytań i nazwach zdarzeń. Zamieniają konwencje dotyczące stringów w kontrakty sprawdzane przez kompilator.

type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat podstaw typów literałów szablonowych.

Podsumowanie

Typy literałów szablonowych tworzą typy literałów stringowych przez podstawianie symboli zastępowania do otaczającego tekstu. Symbole zastępowania zawierające unie rozwijają się do wszystkich kombinacji, a wiele unii tworzy iloczyn kartezjański. Literały inne niż string są konwertowane do postaci tekstowej. Szeroki symbol zastępowania string redukuje wynik do string, dlatego do uzyskania precyzyjnych typów potrzebne są dane wejściowe będące literałami, często uzyskiwane za pomocą as const. Dzięki nim konwencje dotyczące stringów mogą być sprawdzane przez kompilator.

Często zadawane pytania

Czy lekcja „Podstawy typów literałów szablonowych” jest bezpłatna?

Tak — pełny tekst „Podstawy typów literałów szablonowych” 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 „Podstawy typów literałów szablonowych”?

Twórz typy stringów z unii i symboli zastępczych Ć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 „Podstawy typów literałów szablonowych”?

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