Arrays - TypeScript

Arrays são definidos usando a expressão [] e também são fortemente tipados. Isso significa que, se o array inicialmente contém strings, ele só poderá conter strings no futuro.

let list: number[] = [10, 20, 30];
let colors: string[] = ["red", "green", "blue"];
console.log(list[0]);
console.log(colors[1]); 

Assim como em JavaScript, você pode acessar elementos de um array usando índices.

Uma maneira alternativa de definir arrays é usar o tipo Array<>, onde o tipo dos elementos do array é especificado entre colchetes angulares:

let names: Array<string> = ["Tom", "Bob", "Alice"];
console.log(names[1]);  // Bob 

Mas, na verdade, formas de array como number[] ou string[] são abreviações dos tipos Array<number> ou Array<string>, respectivamente.

No geral, arrays em TypeScript suportam todas as operações que os arrays em JavaScript suportam.

Arrays permitem que você altere os valores de seus elementos:

const people = ["Tom", "Bob", "Sam"];
people[1] = "Kate";
console.log(people[1]); // Kate 

Mas o TypeScript também permite definir arrays cujos elementos não podem ser alterados. Para isso, utiliza-se o tipo ReadonlyArray<>, onde o tipo dos elementos do array é especificado entre colchetes angulares.

Ao contrário do tipo Array, para o tipo ReadonlyArray não podemos usar o construtor, como no caso a seguir:

Em vez disso, precisamos passar os valores como um array comum:

Para definir arrays desse tipo, você também pode usar a abreviação de tipo: readonly TipoDeDados[]:

Arrays do tipo ReadonlyArray suportam a maioria das mesmas operações que arrays comuns, exceto as operações que modificam o array e seus elementos. Por exemplo, não podemos alterar valores individuais:

const people: ReadonlyArray<string> = ["Tom", "Bob", "Sam"];
people[1] = "Kate";     // ! Erro: não é possível modificar elementos de um ReadonlyArray

Também não podemos adicionar novos elementos ou remover elementos existentes:

const people: ReadonlyArray<string> = ["Tom", "Bob", "Sam"];

people.push("Kate");    // ! Erro - não é possível adicionar novos elementos
people.pop();           // ! Erro - não é possível remover elementos existentes 

Além disso, durante a compilação, o compilador nos informará que os métodos push() e pop() não estão definidos para o tipo ReadonlyArray. Isso se aplica a todas as operações que modificam o array.

Todas as outras operações que envolvem a leitura do array ainda podem ser usadas:

function printUsers(users: readonly string[]) { 
for(const user of users) {
    console.log(user);
}
}

function usersToString(users: ReadonlyArray<string>): string {
    return users.join(", ");
}

const people: readonly string[] = ["Tom", "Bob", "Sam"];

printUsers(people);
console.log(usersToString(people)); 

Desestruturação de Arrays

Assim como em JavaScript, arrays suportam desestruturação em constantes e variáveis. Por exemplo:

const people: string[] = ["Tom", "Bob", "Sam"]; 

const [first, second, third] = people;
console.log(first);     // Tom
console.log(second);    // Bob
console.log(third);     // Sam 

Aqui, o array people é desestruturado em três constantes: first, second, third. Os valores do array são atribuídos às constantes pela ordem, ou seja, a primeira constante recebe o primeiro elemento do array, a segunda constante recebe o segundo elemento e assim por diante. Observe que não há mais constantes do que elementos no array.

Usando o operador ..., você pode especificar um array no qual todos os elementos restantes do array desestruturado serão colocados, que não se encaixaram nas constantes anteriores:

const people: string[] = ["Tom", "Bob", "Sam"]; 

const [first, ...rest] = people;
console.log(first);     // Tom
console.log(rest[0]);   // Bob
console.log(rest[1]);   // Sam 

Aqui, a constante first recebe o primeiro elemento do array, "Tom". Todos os elementos restantes são colocados no array rest.

Você também pode deixar um espaço vazio em vez de uma constante se quiser pular o elemento correspondente do array:

const people: string[] = ["Tom", "Bob", "Sam", "Kate"];

const [, second, , fourth] = people; // pulamos o primeiro e o terceiro elementos do array
console.log(second);        // Bob
console.log(fourth);        // Kate