Index signature stringa e numerica a confronto
Comprenda regole e particolarità delle chiavi numeriche.
Index signature stringa e numerica a confronto è 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.
Due tipi di chiavi per gli indici
TypeScript supporta index signature sia per string sia per number. Sembrano simili, ma si comportano in modo diverso a causa del modo in cui JavaScript memorizza effettivamente le chiavi degli oggetti.
Una index signature numerica
Una index signature numerica { [i: number]: T } descrive oggetti indicizzati in base a una posizione numerica, in particolare array e strutture simili agli array.
type NumberList = { [index: number]: string }
const names: NumberList = { 0: "ana", 1: "leo" }
console.log(names[0]) // anaJavaScript converte le chiavi numeriche in stringhe
Ecco il fatto fondamentale: le chiavi degli oggetti JavaScript sono sempre stringhe. Quando si scrive obj[0], il motore memorizza in realtà la chiave come stringa "0". TypeScript modella questo comportamento.
const obj: Record<string, string> = {}
obj[1] = "one"
console.log(obj["1"]) // one — same key!
console.log(Object.keys(obj)) // ["1"]La regola di compatibilità
Poiché una chiave numerica è in realtà una stringa, TypeScript applica una regola: quando un oggetto ha sia una index signature numerica sia una stringa, il tipo del valore dell'indice numerico deve essere assegnabile al tipo del valore dell'indice stringa.
interface Mixed {
[key: string]: string
[index: number]: string // must match the string value type
}
const m: Mixed = { 0: "a", name: "b" }
console.log(m[0], m.name)Perché esiste questa regola
Se obj[0] e obj["0"] corrispondono alla stessa posizione, il tipo del valore non può essere numerico in un caso e stringa nell'altro. Per mantenere la coerenza, quindi, il valore dell'indice numerico deve essere un sottotipo del valore dell'indice stringa.
// This is an ERROR:
// interface Bad {
// [key: string]: string
// [index: number]: number // number not assignable to string
// }Indicizzazione numerica: gli array
Gli array sono il tipo indicizzato numericamente per eccellenza. Il tipo integrato Array<T> ha di fatto una index signature numerica, per questo arr[i] restituisce T.
const nums: number[] = [10, 20, 30]
const first: number = nums[0]
console.log(first + nums[2]) // 40Anche le tuple sono indicizzate numericamente
Le tuple si basano sull'indicizzazione numerica, ma associano posizioni specifiche a tipi specifici. L'accesso numerico fuori intervallo restituisce la union dei tipi degli elementi oppure viene segnalato come errore.
const pair: [string, number] = ["age", 30]
const label: string = pair[0]
const value: number = pair[1]
console.log(label + ": " + value)L'indice string consente entrambi gli accessi
Un oggetto con una index signature string accetta anche un accesso dall'aspetto numerico, perché il numero viene prima convertito in una chiave stringa.
type Bag = { [key: string]: number }
const b: Bag = {}
b[5] = 100 // stored as key "5"
console.log(b["5"]) // 100L'indice number non accetta stringhe
Il contrario non vale. Un oggetto tipizzato con la sola index signature number rifiuta le chiavi stringa in fase di compilazione, anche se JavaScript le accetterebbe tecnicamente.
type OnlyNumbers = { [i: number]: string }
const o: OnlyNumbers = { 0: "x" }
// o.name = "y" // Error: property name not on number-indexed type
console.log(o[0])Scegliere tra i due
Utilizzi un indice number per dati simili a sequenze, basati sulla posizione (liste, tuple). Utilizzi un indice string per ricerche con nome (dizionari, cache). In caso di dubbio, string è la scelta più generale.
type Positions = { [i: number]: { x: number; y: number } }
type ByName = { [name: string]: { x: number; y: number } }
const p: Positions = { 0: { x: 1, y: 2 } }
console.log(p[0].x)Un oggetto misto pratico
È possibile combinare entrambe le signature quando un tipo di valore funziona per entrambe, ad esempio per contenitori sparsi simili ad array che espongono anche posizioni con nome.
interface Flexible {
[key: string]: number
[index: number]: number
}
const f: Flexible = { 0: 1, total: 99 }
console.log(f[0] + f.total) // 100Verifica rapida
Verifichi la comprensione delle index signature string e number.
Riepilogo
Le index signature string e number differiscono perché JS memorizza tutte le chiavi come stringhe, convertendo i numeri in chiavi stringa. Quando sono presenti entrambe, il tipo del valore dell'indice number deve essere assegnabile al tipo del valore dell'indice string. L'indicizzazione numerica modella array e tuple, mentre quella string modella i dizionari. Gli oggetti indicizzati con string accettano l'accesso numerico, ma quelli indicizzati con number rifiutano le chiavi stringa in fase di compilazione.
Impara TypeScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 101
- Lezioni
- 352
Domande Frequenti
La lezione «Index signature stringa e numerica a confronto» è gratuita?
Sì — il testo completo di «Index signature stringa e numerica a confronto» è 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 «Index signature stringa e numerica a confronto»?
Comprenda regole e particolarità delle chiavi numeriche. 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 «Index signature stringa e numerica a confronto»?
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
- Definire le index signature
- Index signature stringa e numerica a confronto
- Combinare chiavi note e dinamiche
- Index signature e Record a confronto