TypeScript Academy · Lekcja

Mini parser ścieżek routingu na poziomie typów

Parsuj ścieżki routingu do obiektów typowanych parametrów

Mini parser ścieżek routingu na poziomie typów to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 4 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.

Cel

Budujemy parser tras, który odczytuje ścieżkę taką jak "users/:id/posts/:postId" i tworzy typowany obiekt parametrów { id: string; postId: string }, całkowicie podczas kompilacji. To rzeczywisty wzorzec używany przez routery z typami.

type Params = ParseRoute<"users/:id/posts/:postId">;
// Goal: { id: string; postId: string }

Rozpoznawanie parametru

Segment ścieżki jest parametrem, gdy zaczyna się od ":". Dopasowujemy ten prefiks za pomocą literału szablonowego i wywnioskowujemy nazwę parametru znajdującą się po dwukropku.

Notacja: w rzeczywistym TypeScript typy literałów szablonowych zapisuje się jako ciągi ograniczone znakami backtick, zawierające miejsca wstawiania w składni dollar-brace. W tych fragmentach pokazujemy ten wzorzec jako Tpl<...>, wymieniając poszczególne części w kolejności; na przykład szablon backtick dopasowujący najpierw literał będący prefiksem, a następnie Rest, jest przedstawiony jako Tpl<'prefix', infer Rest>.

type ParamName<S> = S extends Tpl<':', infer Name> ? Name : never;
// Tpl<...> denotes a backtick template literal type: a colon then Name

type X = ParamName<':id'>;   // 'id'
type Y = ParamName<'users'>; // never

Dzielenie ścieżki

Najpierw podziel trasę na segmenty przy "/", ponownie wykorzystując typ Split. Każdy segment jest następnie albo literałem, albo parametrem.

type Split<S extends string, Sep extends string> =
  S extends Tpl<infer H, Sep, infer T> ? [H, ...Split<T, Sep>] : [S];
// Tpl<H, Sep, T> = a template literal type matching H, then Sep, then T

type Segs = Split<'users/:id', '/'>; // ['users', ':id']

Bezpośrednia rekurencja szablonowa

Można również parsować surowy ciąg bez wcześniejszego dzielenia, dopasowując po jednym segmencie naraz. Dopasuj tekst do następnego "/", obsłuż ten segment, a następnie wywołaj rekurencję dla reszty.

type ParseRoute<S extends string> =
  S extends Tpl<infer Seg, '/', infer Rest>
    ? SegParam<Seg> & ParseRoute<Rest>
    : SegParam<S>;
// Tpl<Seg, '/', Rest> matches a segment, a slash, then the rest

Parametr pojedynczego segmentu

Pomocniczy typ przekształca pojedynczy segment w obiekt zawierający jedną właściwość, jeśli segment jest parametrem, albo w pusty obiekt, jeśli jest literałem.

type SegParam<S extends string> =
  S extends Tpl<':', infer Name> ? { [K in Name]: string } : {};
// Tpl<':', Name> matches a colon followed by the param name

type X = SegParam<':id'>;   // { id: string }
type Y = SegParam<'posts'>; // {}

Łączenie za pomocą przecięcia

Każdy segment wnosi swoje parametry za pomocą przecięcia typów. Puste obiekty znikają w przecięciu, więc w typie końcowym pozostają tylko rzeczywiste parametry.

type Params = ParseRoute<"users/:id/posts/:postId">;
// { id: string } & {} & { postId: string } & {}
// = { id: string; postId: string }

Śledzenie parsowania

Dla "users/:id/posts/:postId":

Seg "users" -> {} , rekurencja dla ":id/posts/:postId"
Seg ":id" -> { id: string }, rekurencja dla "posts/:postId"
Seg "posts" -> {}, rekurencja dla ":postId"
Seg ":postId" -> { postId: string }, przypadek bazowy

type Final = { id: string } & { postId: string };

Porządkowanie wyniku

Przecięcie obiektów wyświetla się w mało czytelny sposób. Pomocniczy typ „prettify” spłaszcza je do pojedynczego, przejrzystego typu obiektu za pomocą typu mapowanego obejmującego jego klucze.

type Prettify<T> = { [K in keyof T]: T[K] } & {};

type Clean = Prettify<ParseRoute<"users/:id">>; // { id: string }

Używanie parsera

Wstaw sparsowany typ do funkcji, aby handler otrzymywał poprawnie typowane parametry. Przekazanie nieprawidłowego klucza powoduje błąd kompilacji.

declare function route<P extends string>(
  path: P,
  handler: (params: Prettify<ParseRoute<P>>) => void
): void;

route("users/:id", p => { const id: string = p.id; });

Korzyści z typowanych parametrów

Kompilator wyprowadza teraz params bezpośrednio z tekstu trasy. Zmiana nazwy parametru w ścieżce powoduje automatyczną aktualizację oczekiwanych kluczy w każdym handlerze. Nie trzeba ręcznie tworzyć interfejsu ani obawiać się rozbieżności między trasą a handlerem.

route("users/:userId", p => {
  const u = p.userId; // ok
  // const x = p.id; // error: id does not exist
});

Rozszerzanie parsera

Ten mini parser jest zalążkiem pełnego routera z typami. Można dodać typowane wartości, takie jak parametry liczbowe, symbole wieloznaczne i opcjonalne segmenty, wzbogacając pomocniczy typ obsługujący pojedynczy segment o kolejne wzorce szablonów. Struktura rekurencji szablonowej pozostaje taka sama.

type SegParam2<S extends string> =
  S extends Tpl<':', infer N, '(number)'> ? { [K in N]: number }
  : S extends Tpl<':', infer N> ? { [K in N]: string }
  : {};
// Tpl<...> stands for a backtick template literal type pattern

Szybki test

Proszę sprawdzić swoją wiedzę na temat parsera tras.

Podsumowanie

Zbudowano parser tras działający podczas kompilacji.

Dopasowuj każdy segment za pomocą rekurencyjnego wnioskowania z literałów szablonowych.
Segmenty parametrów (:name) stają się typem { name: string }.
Segmenty będące literałami stają się typem {} i znikają w przecięciu.
Prettify spłaszcza wynik do przejrzystych parametrów.

Następnie, w kursie 25: pełne bezpieczeństwo typów z tRPC.

Często zadawane pytania

Czy lekcja „Mini parser ścieżek routingu na poziomie typów” jest bezpłatna?

Tak — pełny tekst „Mini parser ścieżek routingu na poziomie 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 „Mini parser ścieżek routingu na poziomie typów”?

Parsuj ścieżki routingu do obiektów typowanych parametrów Ć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 4 z 4.

Ile czasu zajmuje lekcja „Mini parser ścieżek routingu na poziomie 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

Koncepcje kombinatorów parserów
Dzielenie stringów na poziomie typów
Parsowanie za pomocą literałów szablonowych
Mini parser ścieżek routingu na poziomie typów

← Powrót do TypeScript Academy