Tipizzare le chiavi di traduzione
Derivi dai file dei messaggi una union delle chiavi valide.
Tipizzare le chiavi di traduzione è 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.
Derivazione di chiavi di traduzione valide
In una configurazione i18n con sicurezza dei tipi, l'insieme delle chiavi di traduzione valide viene derivato dall'oggetto dei messaggi. Un errore di battitura come t("greetng") diventa un errore di compilazione, non un bug dovuto a una stringa mancante a runtime.
Un oggetto dei messaggi
Si parte da un semplice oggetto di messaggi. È l'unica fonte autorevole sia per i valori sia per il tipo delle chiavi.
const messages = {
greeting: "Hello",
farewell: "Goodbye",
cart: {
empty: "Your cart is empty",
checkout: "Proceed to checkout",
},
} as const;Chiavi di primo livello con keyof
Per un oggetto piatto, keyof typeof restituisce l'unione delle chiavi.
type TopKeys = keyof typeof messages;
// "greeting" | "farewell" | "cart"Il problema degli oggetti annidati
I cataloghi reali dei messaggi sono annidati. Vogliamo percorsi separati da punti come "cart.empty", non solo chiavi di primo livello. Ci serve un tipo ricorsivo che attraversi l'oggetto.
Un tipo ricorsivo per i percorsi
Un tipo condizionale e un tipo mappato costruiscono percorsi separati da punti ricorrendo negli oggetti annidati e anteponendo le chiavi. Il prefisso usa un tipo letterale di modello, scritto con i backtick nel codice reale come [backtick]${K}.${Paths<T[K]>}[backtick]. Di seguito lo mostriamo come JoinPath(K, child) per mantenere pulito l'elenco.
type JoinPath<K extends string, Rest extends string> = K + "." + Rest;
// (Real TS uses a template literal type:
// the K dot Rest pattern delimited by backticks.)
type Paths<T> = {
[K in keyof T & string]: T[K] extends string
? K
: K | (T[K] extends object
? JoinPath<K, Paths<T[K]>>
: never);
}[keyof T & string];Applicazione del tipo
Passando il tipo messages a Paths si ottengono tutte le chiavi separate da punti valide.
type MsgKey = Paths<typeof messages>;
// "greeting" | "farewell" | "cart" | "cart.empty" | "cart.checkout"Chiavi delle sole foglie
Spesso si desiderano solo i percorsi delle foglie, cioè le stringhe effettive, escludendo gli oggetti intermedi. Si modifica la ricorsione in modo da ignorare i nodi non stringa. Anche il prefisso K-punto-figlio usa un tipo letterale di modello, delimitato dai backtick nel codice reale, mostrato qui come JoinPath.
type LeafPaths<T> = T extends string
? ""
: {
[K in keyof T & string]: T[K] extends string
? K
: JoinPath<K, LeafPaths<T[K]>>;
}[keyof T & string];
// "greeting" | "farewell" | "cart.empty" | "cart.checkout"Una funzione t tipizzata
Si vincola il parametro della funzione di traduzione all'unione delle chiavi derivate, così in fase di compilazione sono ammesse solo chiavi valide.
declare function t(key: LeafPaths<typeof messages>): string;
t("cart.empty"); // ok
t("cart.missing"); // Error: not a valid keyDeterminazione del tipo del valore
È possibile andare oltre e dedurre il tipo del valore in corrispondenza di un percorso, utile quando i messaggi contengono elementi non stringa. Un tipo condizionale che indicizza il percorso attraversa i punti. Suddivide il percorso con un modello di tipo letterale che, nel codice reale, viene scritto con i backtick nella forma Head punto Rest con infer. Di seguito indichiamo questa suddivisione come SplitHead/SplitRest.
// Conceptually: split "cart.empty" into Head="cart", Rest="empty"
// using a template literal pattern with infer.
type ValueAt<T, P extends string> =
P extends SplitHead<infer Head, infer Rest>
? Head extends keyof T ? ValueAt<T[Head], Rest> : never
: P extends keyof T ? T[P] : never;Perché as const è importante
Senza as const, i valori stringa diventano più generici fino a string e si perdono le informazioni sui letterali necessarie in seguito, ad esempio per estrarre i segnaposto. Dichiari sempre i cataloghi come const.
Perché è importante
Derivare le chiavi dal catalogo fa sì che l'aggiunta, la ridenominazione o la rimozione di un messaggio aggiorni immediatamente il tipo delle chiavi consentite ovunque. Non serve mantenere un enum centrale né gestire costanti stringa obsolete.
Verifica rapida
Confermi di aver compreso la tipizzazione delle chiavi di traduzione.
Riepilogo
Ha derivato un'unione di chiavi valide da un oggetto messages usando keyof insieme a un tipo ricorsivo dei percorsi basato su tipi letterali di modello. Le varianti che includono solo le foglie escludono gli oggetti intermedi, una t tipizzata rifiuta le chiavi non valide e as const conserva le informazioni sui letterali necessarie al sistema dei tipi.
Domande Frequenti
La lezione «Tipizzare le chiavi di traduzione» è gratuita?
Sì — il testo completo di «Tipizzare le chiavi di traduzione» è 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 «Tipizzare le chiavi di traduzione»?
Derivi dai file dei messaggi una union delle chiavi valide. 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 «Tipizzare le chiavi di traduzione»?
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