TypeScript Academy · Lezione

Array e tuple readonly

Protegga array e tuple dai metodi di mutazione.

Lezione 2 di 413 passaggi

Array e tuple readonly è 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.

Array readonly

Un array readonly è un array da cui è possibile leggere, ma che non è possibile modificare. Si scrive readonly number[] o, in modo equivalente, ReadonlyArray<number>. Il tipo degli elementi rimane invariato: viene bloccata solo la mutazione.

const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonly

Il tipo ReadonlyArray

ReadonlyArray<T> è la forma generica, identica nel significato a readonly T[]. Utilizzi la forma che risulta più leggibile: sono intercambiabili.

const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));

Nessun metodo mutante

Gli array readonly non espongono affatto i metodi mutanti. push, pop, splice, sort e reverse non sono disponibili: il tipo non li contiene letteralmente.

const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);

I metodi non mutanti continuano a funzionare

I metodi che restituiscono un nuovo valore invece di modificare l'array, come map, filter, concat e slice, sono ancora disponibili. Producono nuovi array, lasciando intatto quello originale.

const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchanged

Array readonly come parametri

Accettare readonly T[] in una funzione comunica che non verrà modificato l'array del chiamante. Documenta l'intento e consente al compilatore di far rispettare questa promessa.

function sum(values: readonly number[]): number {
  return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));

Gli array modificabili sono assegnabili a quelli readonly

Un normale number[] può essere assegnato a un parametro readonly number[]: si promette semplicemente di non modificarlo. Non è consentito il contrario.

function total(v: readonly number[]): number {
  return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // ok

Tuple readonly

Anche le tuple possono essere readonly: readonly [string, number]. I tipi e l'ordine degli elementi sono fissi e non è possibile riassegnare le singole posizioni.

const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tuple

Le tuple readonly impediscono la mutazione

Come gli array readonly, le tuple readonly rimuovono i metodi mutanti e rifiutano l'assegnazione tramite indice. Sono perfette per strutture di forma fissa, come le coppie di coordinate.

const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);

Asserzione const e tipo readonly

Le due modalità per ottenere array readonly presentano una differenza sottile. Un'annotazione readonly number[] mantiene il tipo generico degli elementi. as const si spinge oltre: crea una tupla readonly di tipi literal.

const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const;            // readonly [1, 2, 3]
console.log(a[0], b[0]);

Scegliere tra le due opzioni

Utilizzi un'annotazione readonly T[] quando desidera l'immutabilità, ma tipi di elementi generici. Utilizzi as const quando Le servono anche i valori literal esatti, ad esempio per ricavare un'unione.

const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);

Immutabilità per i dati condivisi

Gli array e le tuple readonly proteggono le costanti condivise e gli elenchi di configurazione dalle mutazioni accidentali, rendendo impossibili in fase di compilazione i bug dovuti a modifiche impreviste.

const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
  return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));

Verifica rapida

Verifichi la Sua comprensione degli array e delle tuple readonly.

Rispondi nella lezione interattiva

Riepilogo: array e tuple readonly

Ha imparato che:

readonly T[] / ReadonlyArray<T> impedisce la mutazione, ma consente la lettura e l'uso dei metodi non mutanti.
I metodi mutanti come push/splice vengono rimossi dal tipo.
Le tuple readonly fissano sia la lunghezza sia i tipi degli elementi.
as const si spinge oltre, producendo tuple readonly di tipi literal.

Ora analizziamo i tipi di collezione readonly.

const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);

Gratis per iniziare

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

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Array e tuple readonly» è gratuita?

Sì — il testo completo di «Array e tuple readonly» è 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 «Array e tuple readonly»?

Protegga array e tuple dai metodi di mutazione. 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 «Array e tuple readonly»?

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