Modellare stringhe strutturate
Imponga formati come nomi di eventi e percorsi di route.
Modellare stringhe strutturate è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Imporre formati alle stringhe
Molte stringhe nelle applicazioni reali seguono una struttura: nomi dei gestori di eventi, percorsi di route API e variabili CSS. I tipi template literal consentono di modellare questi formati, così il compilatore li impone.
Modellare i nomi dei gestori di eventi
Il nome di un gestore ha spesso la forma di on seguito da un evento con iniziale maiuscola. Usando l'helper intrinseco Capitalize all'interno di un template, l'evento 'click' corrisponde al nome del gestore 'onClick'.
type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)Perché Capitalize è importante
Senza Capitalize, il template produrrebbe 'onclick'. Il tipo intrinseco converte in maiuscolo il primo carattere del letterale, producendo nomi di gestori in camelCase idiomatico.
type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)Generare una mappa di gestori
Combini chiavi template literal con un tipo mappato per generare un tipo oggetto di gestori: una funzione tipizzata per ogni evento, con nomi scritti nella forma corretta.
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)Modellare i percorsi di route
Le route API condividono una struttura composta da una barra iniziale, una risorsa e un segmento id. Un template che combina testo fisso con un segnaposto cattura i percorsi validi.
type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)Percorsi parametrizzati
Aggiunga un segnaposto per un id dinamico. Un template composto da una barra, una risorsa, un'altra barra e infine un segmento id generico modella percorsi come un percorso users seguito da un id numerico.
type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
return "/users/" + id
}
console.log(userPath(42)) // /users/42Imporre i formati in fase di compilazione
Tipizzando un parametro come tipo template literal, rifiuta qualsiasi stringa che non rispetti la struttura: una protezione contro route o chiavi malformate.
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")Comporre i nomi delle variabili CSS
Le proprietà personalizzate CSS seguono una convenzione di denominazione. Un template con due trattini iniziali e un segnaposto per il token modella nomi come quello di una variabile per un token di colore.
type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)Suddividere con l'inferenza
I tipi template literal possono anche effettuare il parsing: con i tipi condizionali e infer, estragga parti di una stringa strutturata a livello di tipo, ad esempio ricavando il metodo da una stringa di endpoint.
type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)Vantaggi nel mondo reale
I tipi per stringhe strutturate intercettano intere categorie di bug: un nome di gestore scritto in modo errato, una route sconosciuta o un token CSS sbagliato diventano tutti errori di compilazione anziché fallimenti silenziosi a runtime.
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"))Mantenerli leggibili
Per quanto potenti, i tipi template annidati in profondità compromettono la leggibilità. Dia un nome agli alias di tipo intermedi, così la struttura rimane chiara per chi leggerà il codice in seguito.
type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)Verifica rapida
Verifichi la sua comprensione della modellazione delle stringhe strutturate.
Riepilogo
I tipi template literal modellano stringhe strutturate — nomi di gestori (on + Capitalize di un evento), percorsi di route e variabili CSS — e ne impongono i formati in fase di compilazione. Combinati con i tipi mappati generano mappe di gestori, mentre insieme ai tipi condizionali e a infer analizzano le stringhe. Dia un nome agli alias intermedi per mantenere leggibili i modelli complessi.
Domande Frequenti
La lezione «Modellare stringhe strutturate» è gratuita?
Sì — il testo completo di «Modellare stringhe strutturate» è 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 «Modellare stringhe strutturate»?
Imponga formati come nomi di eventi e percorsi di route. 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 2 di 4.
Quanto tempo richiede la lezione «Modellare stringhe strutturate»?
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
- Basi dei tipi literal template
- Modellare stringhe strutturate
- Union di stringhe e completamento automatico
- Tipi intrinseci di manipolazione delle stringhe