Frontend Academy · Lekcja

Typy literałów szablonowych

Połączy Pan/Pani typy literałów łańcuchów znaków ze składnią literałów szablonowych, aby wyprowadzać typy takie jak nazwy zdarzeń, łańcuchy właściwości CSS i ścieżki tras API.

Typy literałów szablonowych to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym są typy literałów szablonowych?

TypeScript może tworzyć typy ciągów znaków z literałów szablonowych na poziomie typów. W połączeniu z typami unii pozwala wyrażać tysiące prawidłowych ciągów bez wymieniania każdego z nich.

Podstawowy typ literału szablonowego

W pozycji typu używaj ciągów znaków ujętych w backticki — mogą one przyjmować inne typy jako interpolacje.

type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!';  // OK
const b: Greeting = 'Hi, Alice!';     // Error

Łączenie unii

Gdy interpolujesz unię, TypeScript tworzy iloczyn kartezjański wszystkich kombinacji.

type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';

type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)

Wnioskowanie nazw zdarzeń

Wyprowadzaj nazwy obsługi zdarzeń z nazw zdarzeń — to klasyczne zastosowanie w rzeczywistych projektach.

type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'

type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }

Pomocnicze typy do operacji na ciągach znaków

TypeScript udostępnia wbudowane pomocnicze typy: Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.

type Hi = Capitalize<'hello'>;    // 'Hello'
type Yell = Uppercase<'hello'>;   // 'HELLO'
type Quiet = Lowercase<'HELLO'>;  // 'hello'
type Lower = Uncapitalize<'Hi'>;  // 'hi'

Typy właściwości CSS

Wyrażaj typy ciągów znaków podobne do CSS: wartości pikselowe, kolory szesnastkowe i wartości procentowe.

type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;

type Style = { padding: Px; color: Hex; width: Pct };

const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // Error

Wnioskowanie za pomocą literałów szablonowych

Słowo kluczowe infer może wyodrębniać części typu ciągu znaków — jest przydatne przy parserach i typach tras.

type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;

type Result = ExtractName<'Hello, Alice!'>;  // 'Alice'

Typy tras API

Bezpieczne typowanie tras API: wyodrębniaj parametry ścieżki ze wzorca ciągu znaków.

type PathParams<T extends string> =
  T extends `${string}/:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
    : T extends `${string}/:${infer Param}`
    ? { [K in Param]: string }
    : {};

type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }

Typy podpowiedzi klas Tailwind

Ograniczaj właściwości będące ciągami znaków do znanych wartości systemu projektowego.

type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'

function Box(props: { className: TwSpacing }) { /* ... */ }

Ograniczenia i wydajność kompilatora

Iloczyny kartezjańskie literałów szablonowych mogą gwałtownie rosnąć (unia 50 × 50 tworzy 2500 ciągów). TypeScript nadal skompiluje kod, ale wnioskowanie typów staje się powolne. Utrzymuj mały alfabet.

Rozróżnianie typów literałów ciągów znaków

Używaj literałów szablonowych jako bardziej wyrazistej formy brandowania — to nadal ciąg znaków, ale z ograniczeniami.

Szybkie sprawdzenie

Do czego ewaluje type X = `on${Capitalize<'click' | 'focus'>}`?

Podsumowanie: typy literałów szablonowych

Twórz typy ciągów znaków z literałów szablonowych i interpolowanych unii. Iloczyny kartezjańskie szybko rosną — utrzymuj małe alfabety. Używaj Capitalize/Uppercase/Lowercase/Uncapitalize. Łącz je z infer, aby wyodrębniać części ciągów znaków. Są świetne do nazw zdarzeń, wartości CSS, parametrów tras i nazw klas systemu projektowego.

Często zadawane pytania

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

Tak — pełny tekst „Typy 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Typy literałów szablonowych”?

Połączy Pan/Pani typy literałów łańcuchów znaków ze składnią literałów szablonowych, aby wyprowadzać typy takie jak nazwy zdarzeń, łańcuchy właściwości CSS i ścieżki tras API. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 „Typy 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 Frontend Academy?

Tak. Każda lekcja Frontend 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 Frontend Academy