Array e tuple in Typescript

Array in Typescript

Nel linguaggio JavaScript, un elenco ordinato di dati è rappresentato da un array; in TypeScript, gli array sono elenchi ordinati di dati dello stesso tipo. 

Ecco qualche esempio di array in TypeScript:

// array di stringhe 
const greetings: string[] = ["hello", "hi"]; 
// array di numeri 
const oneToFive: number[] = [1, 2, 3, 4, 5]; 
// array di array di numeri
const data: number[][] = [ 
 [1, 2, 3, 4], 
 [2, 4] 
];

Ovviamente, se volessimo mettere insieme elementi di diverso tipo in un array, sarà sufficiente identificarlo come un array di un tipo che comprende tutti i possibili tipi di dato presenti nell’array; al limite, anche se non è consigliabile, potremmo utilizzare any[] per indicare un array che potrebbe contenere qualunque cosa.

Tuple in Typescript

Ricollegandoci a quanto appena detto e all’esempio riportato in precedenza, se, invece, volessimo rappresentare una sequenza ordinata di diversi tipi di dato, possiamo farlo con una tuple, a patto che tale sequenza abbia una cardinalità fissa (cioè che contenga sempre lo stesso numero di elementi). 

Vediamo qualche esempio:

// coppia di numero e booleano 
const couple: [number, boolean] = [1, false]; 
// tripla di booleano, booleano e stringa 
const triple: [boolean, boolean, string] = [false, true, "hello"];

Le tuple lavorano molto bene con l’assegnazione decostruita: 

const triple: [boolean, boolean, string] = [false, true, "hello"]; const [fistBool, secondBool, str] = triple;

Automaticamente, TypeScript assegnerà il tipo corretto a ogni variabile estratta dall’array. Ricalcando la sintassi di decostruzione, è anche possibile combinare array e tuple: 

// tuple con un array di stringhe in coda 
const numberAndStrings: [number, ...string[]] = [1, "hello", "bye"]; const [num, ...strings] = numberAndStrings; 
// array di coppie di numeri 
const couples: [number, number][] = [ 
 [1, 2], 
 [5, 4], 
 [3, -5] 
];

Tutti i tipi di array che abbiamo visto possono essere rappresentati dietro un type alias, usando la parola chiave type:

type Strings = string[]; 
type NumberFollowedByStrings = [number, ...string[]]; 
const strs: Strings = ["hello", "world"]; 
const numAndStrs = [1, ...strs];

Come abbiamo anticipato parlando di oggetti e interfacce, poiché un array in JavaScript è un particolare tipo di oggetto, è anche possibile rappresentare array e tuple dichiarando delle interfacce, ma la sintassi per farlo è decisamente più macchinosa: 

// array di numeri 
interface Numbers extends Array<number> {} 
// tupla di numero e stringa 
interface NumberAndString extends Array<number | string> { 
 0: number; 
 1: string; 
} 
const nums: Numbers = [1, 2, 3]; 
const numAndStr: NumberAndString = [1, "hello"];

In questo esempio, incontriamo la parola chiave extends, che permette di ereditare la definizione di un’altra interfaccia, in questo caso Array<T>, che altro non è che il vero nome di quello che finora abbiamo chiamato T[], dove T è il tipo degli elementi dell’array.

Nel caso di Numbers stiamo semplicemente estendendo un array di numeri senza aggiungere altro. In generale, non è una buona pratica estendere un’interfaccia senza aggiungere nulla di strutturale: in questo caso, stiamo, di fatto, semplicemente dando un altro nome a un tipo già esistente, e per questo scopo ha molto più senso usare un type alias. 

Nel secondo esempio, estendiamo un array che potrebbe contenere numeri o stringhe, e poi nella struttura dell’interfaccia fissiamo un numero in posizione 0, e una stringa in posizione 1. Il tipo che ne risulta è chiaramente una tupla, ma definita attraverso la struttura dell’oggetto che la rappresenta: un oggetto infatti in JavaScript può avere chiavi di tipo string ma anche number; le sole chiavi numeriche non sarebbero sufficienti, perché un array ha anche tutti i suoi metodi come push, map, pop, eccetera, ed è per questo che estendiamo Array. Se non estendessimo Array, perderemmo anche la possibilità di destrutturare la tupla usando le parentesi quadre. 

Anche in questo caso, come per gli oggetti notiamo che TypeScript ci offre una visione duale del type system: da un lato, come avviene per gli enum, abbiamo una rappresentazione dei tipi più rigorosa e gerarchica, dunque vicina al mondo della programmazione orientata agli oggetti; dall’altro, ci permette di ripiegare su una rappresentazione più snella e strutturale, dunque vicina al mondo della programmazione procedurale o funzionale, nonché alla controparte JavaScript dei tipi utilizzati.