TypeScript: creazione e manipolazione di array
La tipizzazione statica consente al compilatore di TypeScript di controllare il tipo di dati degli elementi dell’array. In questo modo gli array di TypeScript riducono la probabilità che il tuo codice contenga errori e ti permettono di sviluppare applicazioni sicure e affidabili.
Che cosa sono gli array di TypeScript?
In TypeScript gli array sono elenchi ordinati di valori. Come in JavaScript, puoi utilizzare gli array di TypeScript per salvare una raccolta di elementi. Questi elementi possono essere di diversi tipi di dati, compresi numeri, catene di caratteri, oggetti o altri array. TypeScript ha il vantaggio di supportare la tipizzazione statica, ossia ti permette di definire il tipo di dati degli elementi in un array. Questa caratteristica migliora il rilevamento degli errori durante lo sviluppo. Senza contare che può anche inferire il tipo di variabile basandosi sul suo valore iniziale.
Una proprietà fondamentale degli array è la loro dimensione dinamica. In questo modo puoi aggiungere o rimuovere elementi senza dover prima stabilire la dimensione. In TypeScript gli array sono modificabili per impostazione predefinita. È comunque possibile creare array immutabili, ossia nuovi array basati su array già esistenti, utilizzando metodi array come map
e filter
. Questi componenti facilitano le operazioni di filtraggio, ordinamento e iterazione sugli elementi, offrendo una struttura coerente per l’organizzazione dei dati.
Inoltre, è possibile sfruttare gli array di TypeScript come base per l’implementazione di strutture dati come pile (LIFO, Last In First Out) e code (FIFO, First In First Out). Sono adatti anche a rappresentare elenchi, tabelle e raccolte in una gran varietà di applicazioni. Grazie alla facilità di gestione degli elementi dello stesso tipo, gli array sono particolarmente utili per l’elaborazione di dati da fonti esterne, che si tratti di API o database.
La sintassi degli array di TypeScript
In TypeScript gli array sono dichiarati con le parole chiave let
, const
o var
, seguite da un nome di variabile e da un’indicazione del tipo di dati. Per la dichiarazione del tipo di dati si utilizzano i due punti, indicando quale tipo di dati deve essere assegnato agli elementi nell’array. Questi elementi sono posizionati in un blocco di inizializzazione dell’array tra parentesi quadre e separati da virgole. Ciò li differenzia dalle variabili.
La sintassi generale per la dichiarazione di un array di TypeScript è la seguente:
const variableName: datatype[] = [element1, element2, ...];
typescript- variableName è il nome che hai scelto per l’array.
- datatype indica il tipo di dati da assegnare agli elementi nell’array.
- [element1, element2, …] sono i veri e propri elementi o i valori da salvare nell’array. Questi elementi devono essere del tipo di dati definito in precedenza.
Di seguito trovi alcuni esempi che ti spiegano meglio la sua sintassi:
// Data type: Number
const numbers: number[] = [1, 2, 3, 4, 5];
// Data type: String
const numbers: string[] = ["Alice", "Bob", "Charlie"];
// Data type: Boolean
const booleans: boolean[] = [true, false];
typescriptMetodi degli array di TypeScript
I metodi degli array di TypeScript sono estremamente utili e potenti perché ti permettono di elaborare, trasformare e organizzare i dati contenuti in un array in modo efficiente. La tabella seguente mostra una panoramica dei metodi degli array più comuni in TypeScript e i loro campi di applicazione.
Metodo | Descrizione |
---|---|
push()
|
Aggiunge uno o più elementi alla fine dell’array e restituisce la nuova lunghezza dell’array. |
pop()
|
Rimuove l’ultimo elemento dall’array e lo restituisce. |
unshift()
|
Aggiunge uno o più elementi all’inizio dell’array e restituisce la nuova lunghezza dell’array. |
shift()
|
Rimuove il primo elemento dall’array e lo restituisce. |
concat()
|
Combina l’array corrente con un altro array o più array diversi e restituisce il nuovo array. L’array originale rimane invariato. |
join(separator)
|
Converte gli elementi dell’array in una catena di caratteri e la restituisce con la possibilità di scegliere un carattere separatore per gli elementi. |
slice(start, end)
|
Crea una copia superficiale dell’array, composta dagli elementi compresi fra l’indice start (inclusivo) e end (esclusivo), che sono stati indicati qui. L’array originale rimane invariato.
|
splice(start, deleteCount, element1, element2, ...)
|
Aggiunge nuovi elementi nella posizione indicata e/o rimuove elementi dall’array. |
forEach(callback)
|
Esegue una funzione fornita per ciascun elemento dell’array. |
map(callback)
|
Crea un nuovo array applicando una funzione su ciascun elemento dell’array. |
filter(callback)
|
Crea un nuovo array che contiene tutti gli elementi per i quali la funzione fornita restituisce il valore true .
|
Esempi di utilizzo degli array di TypeScript
Gli array di TypeScript sono strumenti indispensabili per organizzare ed elaborare i dati nelle applicazioni. Nelle parti seguenti ti mostriamo alcune delle procedure più importanti.
Accesso agli elementi di un array
L’accesso agli elementi di un array in TypeScript è un’operazione fondamentale che ti permette di richiamare specifici elementi all’interno dello stesso array. È possibile accedere agli elementi di un array tramite il loro indice, che ne rappresenta la posizione nella struttura. In TypeScript l’indicizzazione degli array parte da zero. Pertanto, il primo elemento ha indice 0 e il secondo ha indice 1.
let myArray: number[] = [10, 20, 30, 40, 50];
// Accessing elements using index
let firstElement: number = myArray[0]; // Output: 10
let secondElement: number = myArray[1]; // Output: 20
let thirdElement: number = myArray[2]; // Output: 30
// Assigning a new value to an array element
myArray[3] = 99; // 4th element in myArray = 99
typescriptDestrutturazione degli array
La destrutturazione degli array in TypeScript (conosciuta anche come “object destructuring” in inglese) è un modo facile e veloce per estrarre valori da un array e assegnarli alle variabili.
let numberArray: number[] = [1, 2, 3];
// Array destructuring
let [firstNumber, secondNumber, thirdNumber] = numberArray;
// Access values
console.log(firstNumber); // Outputs 1
console.log(secondNumber); // Outputs 2
console.log(thirdNumber); // Outputs 3
typescriptIterazione sugli elementi in array di TypeScript
L’esempio seguente mostra l’iterazione su un array in TypeScript per mezzo di un ciclo for:
let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
typescriptQuesto esempio presenta un array numbers
contenente dei numeri. Utilizziamo un ciclo for per eseguire l’iterazione sull’array. Il ciclo inizia con i = 0
; i
aumenta a ogni passaggio del ciclo. Utilizzando numbers[i]
accediamo all’elemento interessato dell’array e il valore viene restituito come output.
Il risultato che otteniamo è il seguente:
1
2
3
4
5
typescript- Certificato SSL Wildcard incluso
- Registrazione di dominio sicura
- Indirizzo e-mail professionale da 2 GB
![](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/IAS/CTAs/SEO_Digital_Guide_Mobile_nur-Nlement_900x750.png)