0Pricing
TypeScript Academy · Lezione

Definire le index signature

Descriva oggetti le cui chiavi non sono note in anticipo.

Definire le index signature è 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.

Oggetti con chiavi sconosciute

A volte non si conoscono in anticipo i nomi delle proprietà: un dizionario di punteggi, una cache, una tabella di ricerca. La index signature di TypeScript consente di descrivere un oggetto le cui chiavi sono arbitrarie, ma i cui valori hanno tutti lo stesso tipo.

Sintassi di base delle index signature

Una index signature si scrive come { [key: string]: number }. Significa che qualsiasi chiave stringa corrisponde a un valore numerico. Il nome key è solo un'etichetta: può chiamarlo come preferisce.

type Scores = { [name: string]: number }

const game: Scores = { alice: 10, bob: 7 }
console.log(game.alice) // 10

Aggiungere chiavi dinamicamente

Poiché è consentita qualsiasi chiave stringa, può assegnare nuove proprietà a runtime senza che TypeScript segnali errori. Questo è precisamente lo scopo di una index signature.

type Scores = { [name: string]: number }

const game: Scores = {}
game.charlie = 5     // allowed
game["dave"] = 9     // also allowed
console.log(game.charlie + game.dave) // 14

Accedere a chiavi arbitrarie

Può leggere qualsiasi chiave, anche una che non è mai stata impostata. Il sistema dei tipi si fida della signature, quindi il tipo del valore è number; tuttavia, a runtime, una chiave mancante vale undefined. È bene prestare attenzione.

type Scores = { [name: string]: number }

const game: Scores = { alice: 10 }
const missing = game.zara // typed as number, but actually undefined
console.log(missing) // undefined

Tutti i valori devono essere conformi

Ogni proprietà dell'oggetto deve corrispondere al tipo di valore della signature. Non è possibile inserire un valore numerico in un dizionario di stringhe.

type Labels = { [key: string]: string }

const ok: Labels = { id: "a1", role: "admin" }
// const bad: Labels = { id: "a1", count: 5 } // Error: 5 not a string

Index signature nelle interfacce

La stessa sintassi funziona all'interno di un interface. È comune usarla per descrivere oggetti di configurazione o mappe di risposta provenienti da un'API.

interface Dictionary {
  [word: string]: string
}

const defs: Dictionary = {
  cat: "a small animal",
  ts: "a typed superset of JavaScript",
}
console.log(defs.ts)

I tipi dei valori possono essere qualsiasi cosa

Il lato dei valori non è limitato ai tipi primitivi. È possibile associare le chiavi ad array, oggetti o union, in base alle esigenze dei dati.

type Groups = { [team: string]: string[] }

const roster: Groups = {
  red: ["ana", "leo"],
  blue: ["sam"],
}
console.log(roster.red.length) // 2

Iterare sugli oggetti con index signature

Un ciclo for...in visita ogni chiave dinamica. All'interno del ciclo, il valore è tipizzato correttamente in base alla signature.

type Scores = { [name: string]: number }
const game: Scores = { alice: 10, bob: 7 }

for (const name in game) {
  console.log(name + ": " + game[name])
}

La lacuna di sicurezza legata a undefined

Le index signature nascondono il fatto che una ricerca può non riuscire. Abilitando noUncheckedIndexedAccess in tsconfig si aggiunge | undefined a ogni accesso, obbligando a gestire le chiavi mancanti.

// with noUncheckedIndexedAccess on:
type Scores = { [name: string]: number }
const game: Scores = { alice: 10 }
const v = game.bob // type: number | undefined
console.log(v ?? 0)

Index signature in sola lettura

Anteporre readonly alla signature vieta la scrittura tramite qualsiasi chiave. Il dizionario diventa una struttura di sola consultazione.

type Frozen = { readonly [key: string]: number }

const rates: Frozen = { usd: 1, eur: 1.1 }
// rates.usd = 2 // Error: read-only
console.log(rates.eur)

Quando usare le index signature

Utilizzi una index signature quando l'insieme delle chiavi è aperto e viene determinato a runtime: cache, contatori indicizzati per id, parametri di query analizzati. Per un insieme fisso di chiavi note, preferisca proprietà esplicite o Record.

type Counter = { [event: string]: number }
const clicks: Counter = {}
function track(e: string) { clicks[e] = (clicks[e] ?? 0) + 1 }
track("open"); track("open")
console.log(clicks.open) // 2

Verifica rapida

Verifichi la comprensione delle index signature.

Riepilogo

Ha imparato che { [key: string]: T } descrive oggetti con chiavi arbitrarie i cui valori hanno tutti il tipo T. Le chiavi possono essere aggiunte dinamicamente, ogni valore deve essere conforme alla signature e, a runtime, la ricerca di una chiave mancante restituisce undefined. Utilizzi readonly per le mappe immutabili e abiliti noUncheckedIndexedAccess per accedere ai valori in modo più sicuro.

Domande Frequenti

La lezione «Definire le index signature» è gratuita?

Sì — il testo completo di «Definire le index signature» è 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 «Definire le index signature»?

Descriva oggetti le cui chiavi non sono note in anticipo. 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 «Definire le index signature»?

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

  1. Definire le index signature
  2. Index signature stringa e numerica a confronto
  3. Combinare chiavi note e dinamiche
  4. Index signature e Record a confronto
← Torna a TypeScript Academy