TypeScript Academy · Lezione

L’operatore di tipo keyof

Ottenga con keyof una union delle chiavi di un tipo oggetto.

L’operatore di tipo keyof è 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.

Le chiavi di un tipo

L'operatore keyof accetta un tipo oggetto e produce un'unione delle chiavi delle sue proprietà. È la base per l'accesso alle proprietà con sicurezza dei tipi e per le utility generiche sulle chiavi.

keyof di base

Applichi keyof a un'interfaccia per ottenere un'unione dei nomi delle sue chiavi come tipi letterali stringa.

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

Sono consentite solo chiavi valide

Una variabile tipizzata come keyof T può contenere solo una delle chiavi effettive di T. Gli errori di battitura e le chiavi non valide vengono rilevati in fase di compilazione.

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

keyof con typeof

Combini keyof con typeof per ottenere le chiavi del tipo inferito di un valore. In questo modo si ottengono le chiavi di un oggetto di configurazione senza scrivere un'interfaccia.

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

keyof di una firma di indice stringa

Per un tipo con una firma di indice stringa, keyof è string | number, perché è consentita qualsiasi chiave stringa e le chiavi numeriche vengono convertite in stringhe.

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

keyof di una firma di indice numerica

Per una firma di indice numerica, keyof è semplicemente number. Questo corrisponde al modo in cui gli array espongono gli indici numerici.

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

keyof di un tipo array

Applicare keyof a un tipo array produce un'unione sorprendente: gli indici numerici più tutti i nomi dei metodi e delle proprietà dell'array, come length e push.

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

Iterazione sicura sulle chiavi

Utilizzi keyof per scrivere cicli che operano solo su chiavi valide. Convertire Object.keys in (keyof T)[] mantiene sicuro rispetto ai tipi l'accesso indicizzato.

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

keyof nei vincoli dei generics

Un parametro generico per una chiave è generalmente vincolato con K extends keyof T. Questo garantisce che la chiave esista effettivamente nell'oggetto.

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

Combinazione di più chiavi

Poiché keyof T è un'unione, è possibile intersecarla o filtrarla. In questo caso una funzione accetta un array di chiavi valide.

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

Perché keyof è importante

keyof trasforma i nomi delle proprietà in un tipo verificabile, consentendo di creare getter, setter e mapper generici che non possono fare riferimento a una chiave inesistente. È onnipresente in TypeScript avanzato.

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

Verifica rapida

Verifichi la comprensione dell'operatore keyof.

Riepilogo

keyof T produce un'unione delle chiavi delle proprietà di T come tipi letterali, limitando le variabili alle chiavi valide. Restituisce string | number per le firme di indice stringa e number per le firme di indice numeriche. Insieme a typeof, ricava le chiavi dai valori; insieme ai generics (K extends keyof T), permette di creare getter, selettori e iterazioni con sicurezza dei tipi.

Domande Frequenti

La lezione «L’operatore di tipo keyof» è gratuita?

Sì — il testo completo di «L’operatore di tipo 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 «L’operatore di tipo keyof»?

Ottenga con keyof una union delle chiavi di un tipo oggetto. 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 «L’operatore di tipo 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