Type safety dell’interpolazione
Estragga e renda obbligatorie dalle stringhe le variabili di interpolazione.
Type safety dell’interpolazione è 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.
Interpolazione sicura rispetto ai tipi
I messaggi contengono spesso segnaposto come "Hello, {name}". L'i18n con sicurezza dei tipi estrae i nomi dei segnaposto dal tipo stringa del messaggio e richiede di passare gli argomenti corrispondenti.
L'obiettivo
Dato il tipo letterale di un messaggio, vogliamo calcolare l'oggetto delle variabili di cui ha bisogno, in modo che t("greet", { name: "Ada" }) sia imposto dal compilatore e l'assenza di name produca un errore di compilazione.
Estrazione di un segnaposto
Un tipo condizionale letterale di modello estrae il nome della variabile da una stringa con un solo segnaposto. Nel codice reale, il modello viene scritto con i backtick come: stringa, parentesi graffa aperta, infer V, parentesi graffa chiusa, stringa. Di seguito indichiamo questo matcher come BraceMatch.
// Real TS pattern (backtick template literal):
// matches any text, then {V}, then any text; infers V.
type Var<S extends string> =
S extends BraceMatch<infer V> ? V : never;
type A = Var<"Hello, {name}">; // "name"Estrazione di più segnaposto
Si ricorre alla ricorsione per raccogliere ogni segnaposto in un'unione. Il modello cattura una variabile e la parte restante, quindi applica nuovamente la ricorsione alla parte restante.
// Pattern: any text, {V}, then Rest tail -- infer V and Rest.
type Vars<S extends string> =
S extends BraceMatchRest<infer V, infer Rest>
? V | Vars<Rest>
: never;
type B = Vars<"Hi {first} {last}!">; // "first" | "last"Dai nomi a un oggetto args
Si trasforma l'unione dei nomi in un tipo di oggetto con proprietà obbligatorie usando un tipo mappato.
type ArgsOf<S extends string> = {
[K in Vars<S>]: string | number;
};
type G = ArgsOf<"Hello, {name}">;
// { name: string | number }Nessun segnaposto, nessun argomento
Quando un messaggio non contiene segnaposto, Vars è never, quindi l'oggetto degli argomenti è vuoto. In questo caso è possibile rendere opzionale il parametro args.
type C = Vars<"Goodbye">; // never
type D = ArgsOf<"Goodbye">; // {} (empty)Una funzione di traduzione tipizzata
Si rende il parametro args dipendente dalla chiave scelta recuperando il letterale del messaggio e calcolandone gli argomenti.
declare const messages: {
greet: "Hello, {name}";
invite: "Join {count} others";
};
declare function t<K extends keyof typeof messages>(
key: K,
args: ArgsOf<(typeof messages)[K]>
): string;L'applicazione del vincolo
Ora il compilatore richiede esattamente le variabili dichiarate da ciascun messaggio.
t("greet", { name: "Ada" }); // ok
t("greet", {}); // Error: name is missing
t("invite", { count: 3 }); // ok
t("invite", { name: "x" }); // Error: count missing, name unexpectedArgomenti opzionali per i messaggi semplici
Si usa un overload condizionale affinché i messaggi senza segnaposto non richiedano affatto un secondo argomento.
type MaybeArgs<S extends string> =
Vars<S> extends never ? [] : [args: ArgsOf<S>];
declare function t2<K extends keyof typeof messages>(
key: K,
...rest: MaybeArgs<(typeof messages)[K]>
): string;Delimitatori personalizzati
Se il catalogo usa {{name}} o %{name}, si modifica di conseguenza il modello di tipo letterale in Vars. La tecnica è la stessa: cambia solo il letterale circostante.
Perché è importante
Le variabili di interpolazione mancanti o digitate in modo errato sono una causa frequente di stringhe dell'interfaccia non funzionanti ("Hello, undefined"). Estrarle a livello di tipo trasforma questi problemi in errori di compilazione e documenta il contratto di ogni messaggio.
Verifica rapida
Verifichi la Sua comprensione della sicurezza dei tipi nell'interpolazione.
Riepilogo
Associando i tipi letterali dei messaggi tramite pattern matching con i template literal e infer, si estraggono i nomi dei segnaposto in una union, li si associa a un oggetto args obbligatorio e si fa in modo che la funzione di traduzione richieda esattamente quelle variabili, con gli argomenti opzionali quando non ce ne sono.
Domande Frequenti
La lezione «Type safety dell’interpolazione» è gratuita?
Sì — il testo completo di «Type safety dell’interpolazione» è 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 «Type safety dell’interpolazione»?
Estragga e renda obbligatorie dalle stringhe le variabili di interpolazione. 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 «Type safety dell’interpolazione»?
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
- Tipizzare le chiavi di traduzione
- Type safety dell’interpolazione
- Pluralizzazione con i tipi
- Inferenza dei tipi consapevole della locale