Basi dei tipi literal template
Costruisca tipi stringa a partire da union e segnaposto.
Basi dei tipi literal template è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Stringhe a livello di tipo
I tipi template literal costruiscono nuovi tipi letterali di stringa combinando altri tipi stringa. Usano la stessa sintassi con backtick e segnaposto delle stringhe template a runtime, ma operano esclusivamente sui tipi.
Un semplice tipo template literal
Immagini un alias di tipo Greeting definito come un template literal contenente il testo Hello, seguito da un segnaposto per il tipo Name. Se Name è il letterale 'Ada', allora Greeting è il tipo letterale 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)I segnaposto incorporano altri tipi
Nel segnaposto può inserire qualsiasi tipo simile a una stringa: un letterale, un parametro di tipo o un'unione. TypeScript lo sostituisce nel testo circostante per formare un nuovo tipo letterale.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)La combinazione di unioni moltiplica le varianti
Quando un segnaposto contiene un'unione, il template si espande includendo ogni membro. Un template che combina 'a' | 'b' con un suffisso fisso produce un'unione di ogni combinazione.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)Più segnaposto si moltiplicano tra loro
Due segnaposto costituiti da unioni formano un prodotto cartesiano. Combinando le dimensioni 'sm' | 'lg' con i colori 'red' | 'blue' tramite un separatore si ottengono quattro tipi letterali.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)Perché è utile
I tipi template literal consentono di descrivere con precisione famiglie di stringhe — nomi di classi CSS, nomi di eventi e percorsi di route — così il compilatore rifiuta le stringhe malformate prima dell'esecuzione.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)Numeri e booleani vengono convertiti
I tipi non stringa inseriti in un tipo template literal vengono convertiti nella loro forma testuale. Un letterale numerico 42 diventa il testo 42 nel tipo stringa risultante.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)Usare un segnaposto generico
Una funzione generica può costruire un tipo template literal restituito a partire dal tipo letterale del suo argomento, così la stringa precisa è nota in ogni punto di chiamata.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeVincolare gli input
Può richiedere che un valore corrisponda a un tipo template literal. Vengono accettate soltanto le stringhe conformi al modello descritto, intercettando gli errori di battitura in fase di compilazione.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignablestring generalizzata annulla il modello
Se un segnaposto è del tipo string generalizzato anziché di un tipo letterale, l'intero template si riduce a string. Per mantenere la specificità servono input letterali, spesso tramite as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)Dove utilizzarli
I tipi template literal sono ideali ovunque le stringhe seguano una struttura: classi utility CSS, identificatori con prefisso, chiavi di query e nomi di eventi. Trasformano le convenzioni sulle stringhe in contratti verificati dal compilatore.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)Verifica rapida
Verifichi la sua comprensione delle basi dei tipi template literal.
Riepilogo
I tipi template literal costruiscono tipi letterali di stringa sostituendo i segnaposto nel testo circostante. I segnaposto costituiti da unioni si espandono in ogni combinazione e più unioni formano un prodotto cartesiano. I letterali non stringa vengono convertiti nella loro forma testuale. Un segnaposto string generalizzato riduce il risultato a string, quindi per ottenere tipi precisi servono input letterali, spesso tramite as const. In questo modo le convenzioni sulle stringhe vengono verificate dal compilatore.
Domande Frequenti
La lezione «Basi dei tipi literal template» è gratuita?
Sì — il testo completo di «Basi dei tipi literal template» è 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 «Basi dei tipi literal template»?
Costruisca tipi stringa a partire da union e segnaposto. 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 1 di 4.
Quanto tempo richiede la lezione «Basi dei tipi literal template»?
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