Arrays

Arrays

  Para acessar o link da lição, clique aqui.

Chegou enfim o momento de aprendermos a fazer a declaração de arrays usando o Typescript 😍

E apesar de já termos visto esse tipo de declaração em lições anteriores, nada melhor do que relembrar, não acha?

O que são Arrays?

Arrays são estruturas de dados que armazenam múltiplos valores em uma única variável, o que facilita o gerencimanto e manipulação desses mesmos valores, e o resto você já sabe 😉

No Typescript, nós declaramos nossos arrays da seguinte forma:

let numeros: number[] = [1, 2, 3, 4, 5];
let textos: string[] = ['a', 'b', 'c'];

Lembrando que o tipo declarado após o nome da variável é fundamental para fazer com que nossos arrays aceitem somente números ou strings.

Além disso, você pode usar uma notação genérica para declarar seus tipos:

let numeros: Array<number> = [1, 2, 3, 4, 5];
let textos: Array<string> = ['a', 'b', 'c'];

Lembrando que podemos fazer o uso do conceito de Union Type para permitir que um array possa aceitar mais de um tipo:

let meuArray: (string | number)[] = [];

Declarando Arrays Multidimensionais

No Typescript precisamos tipar nossas arrays multidimensionais, mas a declaração deles não se difere muito daquilo que vimos na jornada Javascript:

let matrix: number[][] = [
 [1, 2, 3],
 [4, 5, 6],
 [7, 8, 9]
];

Propriedade Readonly

No Typescript, podemos definir a propriedade readonly que faz com que todos os nossos itens sejam usados somente para leituras.

let meuArray: ReadonlyArray<string | number> = ["Micilini", "Roll", 99];

//meuArray[0] = "Noner";//Não podemos setar pois é somente leitura

Na propriedade readonly, a modificação dos itens já pre-setados, podem ser feitas através de métodos, mas tenha em mente que não podemos aumentar o array:

let meuArray: ReadonlyArray<string | number> = ["Micilini", "Roll", 99];

meuArray = meuArray.map((item) => {
 return 'Oi';
});

console.log(meuArray);

No comando acima, a única forma de modificar o array é atráves do método map.

Usando Tuplas

Uma Tupla é um tipo de array em que nós definomos a quantidade e o tipo de elementos permitidos.

Nele, nós criamos um novo Type, onde dentro dele inserimos um array contendo todos os tipos necessários para a implementação do array.

let person: [string, number] = ['John', 30];

No comando acima, nós criamos uma variável chamada person que deve conter um elemento do tipo string e o segundo do tipo number.

Veja um outro exemplo onde queremos criar um outro array que contenha apenas 4 tipos strings:

let txt: [string, string, string, string] = ['Micilini', 'Roll', 'É', 'DEZ!'];

Podemos criar um type de modo a usá-lo futuramente em nosso array:

type cincoNumeros = [number, number, number, number, number];

const meusNumeros: cincoNumeros = [1, 2, 3, 4, 5];

console.log(meusNumeros);

Graças as Tuplas nossos arrays se tornam mais previsíveis de se trabalhar 🤓

Também podemos usar nossas Tuplas com o ReadOnly da seguinte forma:

// Definindo uma tupla readonly
const person: readonly [string, number] = ['Alice', 30];

// Tentativas de modificar a tupla irão gerar erros de compilação
// person[0] = 'Bob'; // Erro: Index signature in type 'readonly [string, number]' only permits reading property '0'.
// person[1] = 31; // Erro: Index signature in type 'readonly [string, number]' only permits reading property '1'.

// A tupla pode ser lida sem problemas
console.log(person[0]); // Saída: Alice
console.log(person[1]); // Saída: 30

Fácil, não?

Arquivos da lição

Os arquivos desta lição podem ser encontrados no repositório do GitHub por meio deste link.

Conclusão

Nesta lição você aprendeu sobre o uso de arrays em conjunto com a propriedade ReadOnly e Tuplas.

Até a próxima lição😀