TypeScript Academy · Lezione

Combinare typeof e keyof

Derivi tipi precisi concatenando operatori di tipo.

Combinare typeof e keyof è 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.

La combinazione potente

Singolarmente, typeof ricava un tipo da un valore e keyof elenca le chiavi di un tipo. Insieme — keyof typeof value — producono un'unione delle chiavi effettive di un valore, consentendo un accesso completamente sicuro rispetto ai tipi.

keyof typeof in azione

Inizi con un oggetto const, ne ricavi il tipo con typeof e poi ne elenchi le chiavi con keyof. Il risultato è un'unione dei nomi letterali delle chiavi dell'oggetto.

const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])

Perché esiste questo modello

Spesso si dispone di un oggetto a runtime, ma non di un'interfaccia separata. keyof typeof fornisce un tipo per le chiavi senza duplicare la struttura dell'oggetto in un tipo scritto manualmente.

const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2

Accesso sicuro tramite chiave

Un parametro di funzione tipizzato come keyof typeof obj rifiuta le chiavi non valide in fase di compilazione, quindi l'accesso indicizzato al suo interno è garantito come sicuro.

const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
  return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key

Oggetti costanti simili agli enum

Un idioma comune consiste nel definire un oggetto as const come pseudo-enum e poi derivarne sia i tipi delle chiavi sia quelli dei valori.

const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)

Chiavi e valori

Noti la distinzione: keyof typeof obj fornisce i nomi delle chiavi, mentre typeof obj[keyof typeof obj] fornisce i tipi dei valori. Scelga quello di cui ha bisogno la sua API.

const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)

getProperty generico

Il classico getter sicuro rispetto ai tipi vincola un parametro chiave con K extends keyof T e restituisce T[K], quindi il tipo del risultato corrisponde esattamente a quello della proprietà cercata.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)

Il tipo restituito segue la chiave

Poiché il valore restituito è T[K], il tipo del risultato di ogni chiamata si adatta alla chiave specifica passata: un numero per una chiave, una stringa per un'altra.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id")     // number
const nm = getProperty(u, "name")   // string
console.log(id, nm)

Le chiavi non valide vengono rifiutate

Passare una chiave che non esiste nell'oggetto genera un errore di compilazione. Il vincolo del generic lo impone prima ancora che il codice venga eseguito.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))

Un setter sicuro rispetto ai tipi

Lo stesso meccanismo permette di creare un setter: il parametro valore è T[K], quindi si può assegnare soltanto un valore del tipo corretto per quella chiave.

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)

Mettere tutto insieme

Il modello keyof typeof, insieme all'accesso generico T[K], fornisce utility sicure e riutilizzabili per oggetti reali: sono la base di lettori di configurazione tipizzati, ricerche e helper per moduli.

const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
  return theme[name]
}
console.log(color("danger")) // #f00

Verifica rapida

Verifichi la sua comprensione della combinazione di typeof e keyof.

Riepilogo

keyof typeof value ricava un'unione delle chiavi effettive di un valore senza dover scrivere un'interfaccia separata, rendendo sicuro l'accesso indicizzato. Distingua i tipi delle chiavi (keyof typeof obj) dai tipi dei valori (typeof obj[keyof typeof obj]). Il modello generico getProperty<T, K extends keyof T>(obj, key): T[K] restituisce il tipo esatto della proprietà cercata e rifiuta le chiavi non valide in fase di compilazione.

Domande Frequenti

La lezione «Combinare typeof e keyof» è gratuita?

Sì — il testo completo di «Combinare typeof e keyof» è 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 «Combinare typeof e keyof»?

Derivi tipi precisi concatenando operatori di tipo. 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 «Combinare typeof e keyof»?

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

← Torna a TypeScript Academy