0Pricing
TypeScript Academy · Lezione

Un mini parser di route a livello di tipo

Analizzi i percorsi delle route trasformandoli in oggetti di parametri tipizzati.

Un mini parser di route a livello di tipo è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

L'obiettivo

Costruiamo un parser di route che legge un percorso come "users/:id/posts/:postId" e produce un oggetto params tipizzato { id: string; postId: string }, interamente in fase di compilazione. Questo è un pattern reale usato dai router tipizzati.

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

Riconoscere un parametro

Un segmento del percorso è un parametro quando inizia con ":". Confrontiamo quel prefisso con un template literal e inferiamo il nome del parametro dopo i due punti.

Notazione: in TypeScript reale, i template literal type vengono scritti con stringhe delimitate da backtick che contengono segnaposto dollar-brace. In questi frammenti mostriamo questo pattern come Tpl<...>, elencando ogni parte nell'ordine; ad esempio, un template tra backtick che corrisponde al prefisso literal seguito da Rest appare come 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

Suddividere il percorso

Per prima cosa suddivida la route in segmenti usando "/" e riutilizzando il tipo Split. Ogni segmento è poi un literal oppure un parametro.

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']

Ricorsione diretta sul template

È anche possibile analizzare direttamente la stringa originale senza suddividerla prima, confrontando un segmento alla volta. Confronti fino al successivo "/", gestisca quel segmento, quindi applichi la ricorsione al resto.

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

Parametro per segmento

Questo helper trasforma un singolo segmento in un oggetto con una proprietà (se è un parametro) oppure in un oggetto vuoto (se è un literal).

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'>; // {}

Combinare con l'intersezione

Ogni segmento contribuisce ai propri params tramite un'intersezione. Gli oggetti vuoti scompaiono nell'intersezione, quindi nel tipo finale rimangono solo i parametri effettivi.

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

Seguire l'analisi

Per "users/:id/posts/:postId":

  • Seg "users" -> {} , ricorsione su ":id/posts/:postId"
  • Seg ":id" -> { id: string }, ricorsione su "posts/:postId"
  • Seg "posts" -> {}, ricorsione su ":postId"
  • Seg ":postId" -> { postId: string }, caso base
type Final = { id: string } & { postId: string };

Pulire il risultato

L'intersezione degli oggetti viene visualizzata in modo poco leggibile. Un helper "prettify" la appiattisce in un unico tipo oggetto chiaro, usando un mapped type sulle sue chiavi.

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

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

Usare il parser

Inserisca il tipo analizzato in una funzione, così l'handler riceverà params tipizzati correttamente. Passare una chiave errata diventa un errore di compilazione.

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

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

Il vantaggio dei params tipizzati

Il compilatore ricava ora params direttamente dalla stringa della route. Rinomini un parametro nel percorso e ogni handler aggiornerà automaticamente le proprie chiavi attese. Nessuna interfaccia manuale e nessuna divergenza tra route e handler.

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

Estendere il parser

Questo mini parser è il punto di partenza per un router tipizzato completo. Può aggiungere valori tipizzati (parametri numerici), wildcard e segmenti opzionali, arricchendo l'helper per segmento con altri pattern di template. La struttura basata sulla ricorsione dei template rimane invariata.

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

Verifica rapida

Verifichi la Sua comprensione del parser di route.

Riepilogo

Ha costruito un parser di route in fase di compilazione.

  • Confronti ogni segmento usando l'inferenza ricorsiva dei template literal.
  • I segmenti parametro (:name) diventano { name: string }.
  • I segmenti literal diventano {} e scompaiono nell'intersezione.
  • Prettify appiattisce il risultato in params chiari.

Prossimo: il Corso 25, con la sicurezza dei tipi end-to-end tramite tRPC.

Domande Frequenti

La lezione «Un mini parser di route a livello di tipo» è gratuita?

Sì — il testo completo di «Un mini parser di route a livello di tipo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Un mini parser di route a livello di tipo»?

Analizzi i percorsi delle route trasformandoli in oggetti di parametri tipizzati. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Un mini parser di route a livello di tipo»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Concetti dei parser combinator
  2. Divisione di stringhe a livello di tipo
  3. Parsing con i template literal
  4. Un mini parser di route a livello di tipo
← Torna a TypeScript Academy