Arrays em 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:
const people: ReadonlyArray<string> = new ReadonlyArray("Tom", "Bob", "Sam");
Em vez disso, precisamos passar os valores como um array comum:
const people: ReadonlyArray<string> = ["Tom", "Bob", "Sam"];
Para definir arrays desse tipo, você também pode usar a abreviação de tipo: readonly TipoDeDados[]
:
const people: readonly string[] = ["Tom", "Bob", "Sam"];
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