Using Arrays | Learn TypeScript

Working with Arrays

Para trabalharmos com arrays é simples, basta especificarmos o array type depois do nome:

Definimos o array type number[] com o nome do tipo e colchetes []

let prices: number[] = [100, 75, 42];
let names: string[] = ["Hat", "Gloves", "Umbrella"];

Performing Operations on Typed Arrays

function calculateTax(amount: number): number {
    return amount * 1.2;
}

function writePrice(product: string, price: number): void {
    console.log(`Price for ${product}: $${price.toFixed(2)}`);
}

let prices: number[] = [100, 75, 42];
let names: string[] = ["Hat", "Gloves", "Umbrella"];

prices.forEach((price: number, index: number) => {
    writePrice(names[index], calculateTax(price));
})

Using inferred typing for arrays

Mesmo não definindo o type o TS consegue inferir de que tipo é aquele valor

prices.forEach((price, index) => {
    writePrice(names[index], calculateTax(price));
});

function calculateTax(amount: number): number {
    return amount * 1.2;
}

function writePrice(product: string, price: number): void {
    console.log(`Price for ${product}: $${price.toFixed(2)}`);
}

let prices = [100, 75, 42];
let names = ["Hat", "Gloves", "Umbrella"];

prices.forEach((price, index) => {
    writePrice(names[index], calculateTax(price));
});

Avoiding problems with inferred array types

O compilador infere o array type usando o valor usado para popular o array quando ele é criado

Isso pode causar erros se os valores usados para popular um array, assim pode gerar erros acidentalmente de mixed types. Como no exemplo abaixo:

function calculateTax(amount: number): number {
    return amount * 1.2;
}

function writePrice(product: string, price: number): void {
    console.log(`Price for ${product}: $${price.toFixed(2)}`);
}

let prices = [100, 75, 42, "20"];
let names = ["Hat", "Gloves", "Umbrella", "Sunglasses"];

prices.forEach((price, index) => {
    writePrice(names[index], calculateTax(price));
});

Logo temos este erro:

Avoiding problems with empty arrays

Uma outra questão para usar type annotations para arrays é que o compilador vai inferir o tipo para arrays que são criados vazios:

function calculateTax(amount: number): number {
    return amount * 1.2;
}

function writePrice(product: string, price: number): void {
    console.log(`Price for ${product}: $${price.toFixed(2)}`);
}

let prices = [];
prices.push(...[100, 75, 42, "20"]);

let names = ["Hat", "Gloves", "Umbrella", "Sunglasses"];

prices.forEach((price, index) => {
    writePrice(names[index], calculateTax(price));
});

Como é inicializado vazio o compilador infere que é um array de any:

let prices = [];
prices.push(...[100, 75, 42, "20"]);

No arquivo de declaration teremos isso:

Understanding the never array type pitfall

No TypeScript, quando você cria um array vazio ([]), o compilador tenta inferir o tipo dos elementos que poderão ser adicionados.

Se strictNullChecks está desativado, o compilador assume que null e undefined podem ser atribuídos a outros tipos. Nesse caso, um array vazio pode ser inferido como algo mais flexível, como any[].

Se strictNullChecks está ativado, o compilador não permite que null e undefined sejam usados livremente. Isso muda a inferência: um array vazio passa a ser inferido como never[].

O que significa never[]

O tipo never indica que nenhum valor válido pode existir.

Portanto, um array inferido como never[] não aceita nenhum elemento.

Se você tentar adicionar algo, o compilador gera erro, como no exemplo:

let arr = []; // inferido como never[]
arr.push("texto"); // Erro: 'string' não é atribuível a 'never'

Por que isso acontece

O compilador não tem pistas sobre o tipo dos elementos do array vazio.

Com strictNullChecks: true, ele não pode assumir any ou tipos permissivos.

Então, para garantir segurança, ele usa never, forçando você a declarar explicitamente o tipo ou inicializar o array com valores.

Como resolver

Declarar o tipo do array:

let arr: string[] = [];
arr.push("texto"); // ok

Inicializar com valores:

let arr = [1, 2, 3]; // inferido como number[]
arr.push(4); // ok