TypeScript Academy · Lekcja

Modelowanie ustrukturyzowanych stringów

Wymuszaj formaty takie jak nazwy zdarzeń i ścieżki routingu

Modelowanie ustrukturyzowanych stringów 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.

Wymuszanie formatów stringów

Wiele stringów w rzeczywistych aplikacjach ma określoną strukturę: dotyczy to nazw handlerów zdarzeń, ścieżek routingu API czy zmiennych CSS. Typy literałów szablonowych pozwalają modelować te formaty, aby kompilator mógł ich wymagać.

Modelowanie nazw handlerów zdarzeń

Nazwa handlera często składa się z on i nazwy zdarzenia zapisanej wielką literą. Użycie wbudowanego pomocnika Capitalize wewnątrz szablonu powoduje, że zdarzenie 'click' zostaje przekształcone w nazwę handlera 'onClick'.

type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)

Dlaczego Capitalize ma tu znaczenie

Bez Capitalize szablon dałby wynik 'onclick'. Typ wbudowany zamienia pierwszą literę literału na wielką, tworząc idiomatyczne nazwy handlerów w camelCase.

type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)

Generowanie mapy handlerów

Połącz klucze będące literałami szablonowymi z typem mapowanym, aby wygenerować typ obiektu handlerów — po jednej typowanej funkcji dla każdego zdarzenia, z nazwami zapisanymi we właściwej wielkości liter.

type Events = "click" | "hover"
type Handlers = {
  [E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)

Modelowanie ścieżek routingu

Trasy API mają wspólną strukturę: początkowy ukośnik, zasób i segment identyfikatora. Szablon łączący stały tekst z symbolem zastępowania opisuje poprawne ścieżki.

type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)

Ścieżki sparametryzowane

Proszę dodać symbol zastępowania dla dynamicznego identyfikatora. Szablon składający się z ukośnika, zasobu, kolejnego ukośnika i generycznego segmentu identyfikatora opisuje na przykład ścieżkę users zakończoną identyfikatorem liczbowym.

type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
  return "/users/" + id
}
console.log(userPath(42)) // /users/42

Wymuszanie formatów podczas kompilacji

Typowanie parametru jako typu literału szablonowego odrzuca każdy string, który nie pasuje do struktury — stanowi to zabezpieczenie przed niepoprawnymi trasami lub kluczami.

type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
  return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")

Tworzenie nazw zmiennych CSS

Niestandardowe właściwości CSS mają określony schemat nazewnictwa. Szablon z dwoma początkowymi myślnikami i symbolem zastępowania dla tokenu opisuje nazwy takie jak zmienna tokenu koloru.

type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)

Dzielenie z użyciem inferencji

Typy literałów szablonowych mogą również służyć do analizowania stringów: za pomocą typów warunkowych i infer można wyodrębniać elementy ustrukturyzowanego stringa na poziomie typów — na przykład pobrać metodę ze stringa endpointu.

type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)

Korzyści w praktyce

Typy ustrukturyzowanych stringów wykrywają całe klasy błędów: błędną nazwę handlera, nieznaną trasę czy niewłaściwy token CSS — wszystkie stają się błędami kompilacji zamiast niezauważonymi awariami w czasie działania.

type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))

Dbaj o czytelność

Choć typy literałów szablonowych są potężne, ich głębokie zagnieżdżanie utrudnia czytelność. Należy nazywać pośrednie aliasy typów, aby struktura pozostała jasna dla kolejnej osoby czytającej kod.

type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat modelowania ustrukturyzowanych stringów.

Podsumowanie

Typy literałów szablonowych modelują ustrukturyzowane stringi — nazwy handlerów (on + Capitalize nazwy zdarzenia), ścieżki routingu i zmienne CSS — oraz wymuszają te formaty podczas kompilacji. W połączeniu z typami mapowanymi generują mapy handlerów, a razem z typami warunkowymi i infer pozwalają analizować stringi. Nazywanie pośrednich aliasów pomaga zachować czytelność złożonych wzorców.

Często zadawane pytania

Czy lekcja „Modelowanie ustrukturyzowanych stringów” jest bezpłatna?

Tak — pełny tekst „Modelowanie ustrukturyzowanych stringó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 „Modelowanie ustrukturyzowanych stringów”?

Wymuszaj formaty takie jak nazwy zdarzeń i ścieżki routingu Ć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 „Modelowanie ustrukturyzowanych stringó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

← Powrót do TypeScript Academy