Como criar array tipado com TypeScript

Neste artigo vou te mostrar como criar array tipado com TypeScript, vamos aprender diversas abordagens para fazer isso!

Fala programador(a), beleza? Bora aprender mais sobre TypeScript!

Este artigo irá explicar como criar arrays tipados com TypeScript, incluindo como usar interfaces e tipos personalizados.

O TypeScript é uma linguagem de programação que adiciona tipagem estática ao JavaScript, tornando seus projetos mais seguros e fáceis de manter.

Ao criar arrays tipados, você garante que os dados armazenados no array sejam consistentes e que seu código seja mais seguro.

Neste artigo, você aprenderá como usar a sintaxe de array tipado do TypeScript e como garantir que os dados armazenados sejam do tipo especificado.

Tipando arrays

Em TypeScript, um array tipado é uma coleção de elementos de um determinado tipo.

A sintaxe para criar um array tipado é semelhante à sintaxe de criação de um array em JavaScript, mas com a adição de um tipo específico entre colchetes.

Por exemplo, para criar um array de números inteiros, você pode usar a seguinte sintaxe:

let intArray: number[] = [1, 2, 3, 4, 5];

Neste exemplo, “number[]” indica que o array é de tipo “number”. Você também pode usar a sintaxe de genéricos do TypeScript para criar um array tipado:

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 15min

Conhecer formação

let stringArray: Array<string> = ["hello", "world"];

Em ambos os casos, o TypeScript garantirá que apenas elementos do tipo especificado (números inteiros ou strings, respectivamente) sejam adicionados ao array.

Se você tentar adicionar um elemento de outro tipo, o TypeScript emitirá um erro.

Você também pode criar um array vazio e adicionar elementos a ele posteriormente. Por exemplo:

let emptyArray: number[] = [];
emptyArray.push(1); // OK
emptyArray.push("two"); // Erro do TypeScript: "Argument of type '"two"' is not assignable to parameter of type 'number'."

É importante notar que, quando você cria um array tipado, todos os elementos do array devem ser do tipo especificado. Caso contrário, o TypeScript emitirá um erro. Por exemplo:

let mixedArray: number[] = [1, 2, "three"]; // Erro do TypeScript: Type 'string' is not assignable to type 'number'.

Em resumo, criar um array tipado com TypeScript é simples e fácil.

Ele ajuda a garantir que seus dados sejam consistentes e que seu código seja mais seguro e fácil de manter.

Ao criar arrays tipados, você deve especificar o tipo de dados que será armazenado no array e garantir que todos os elementos adicionados a ele sejam do tipo especificado.

Tipando array com interface

Em TypeScript, você também pode criar arrays tipados usando interfaces ou tipos personalizados.

Para criar um array tipado com uma interface, você deve primeiro definir a interface e, em seguida, especificar esse tipo na sintaxe de array.

Por exemplo, se você tiver uma interface chamada “Pessoa” com propriedades “nome” e “idade”, você pode criar um array de pessoas da seguinte maneira:

interface Pessoa {
  nome: string;
  idade: number;
}

let pessoas: Pessoa[] = [
  { nome: "João", idade: 25 },
  { nome: "Maria", idade: 32 },
  { nome: "Pedro", idade: 20 }
];

Tipando array com tipos personalizados

Da mesma forma, você pode criar um array de tipos personalizados, como classes ou enums. Por exemplo, se você tiver uma classe chamada “Produto” com propriedades “nome” e “preco”:

class Produto {
  nome: string;
  preco: number;
  
  constructor(nome: string, preco: number) {
    this.nome = nome;
    this.preco = preco;
  }
}

let produtos: Produto[] = [
  new Produto("Celular", 800),
  new Produto("Computador", 1500),
  new Produto("Televisão", 1000)
];

É importante notar que, quando você cria um array tipado com uma interface ou tipo personalizado, todos os elementos do array devem ser do tipo especificado.

Por exemplo, se você tentar adicionar um objeto que não implementa a interface “Pessoa” ao array “pessoas”, o TypeScript emitirá um erro.

Em resumo, criar um array tipado com interfaces ou tipos personalizados em TypeScript é semelhante à criação de um array tipado com tipos primitivos.

Você deve especificar o tipo de dados que será armazenado no array e garantir que todos os elementos adicionados a ele sejam do tipo especificado.

Isso ajuda a garantir que seus dados sejam consistentes e que seu código seja mais seguro e fácil de manter.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Criar arrays tipados com TypeScript é uma maneira de garantir que seus dados sejam consistentes e que seu código seja mais seguro e fácil de manter.

A sintaxe para criar um array tipado é semelhante à sintaxe de criação de um array em JavaScript, mas com a adição de um tipo específico entre colchetes.

Além disso, é possível criar arrays tipados com interfaces ou tipos personalizados, garantindo que todos os elementos adicionados ao array sejam do tipo especificado.

Ao seguir as técnicas descritas neste artigo, você estará preparado para criar arrays tipados de maneira eficiente e garantir a consistência dos dados em seus projetos TypeScript.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Array com mais de um tipo (union types)

As vezes tu não quer travar o array em um tipo só

Quer que ele aceite número E string ao mesmo tempo, por exemplo

Pra isso o TypeScript tem os union types, que é só juntar os tipos com uma barra vertical

let misto:

Repara nos parênteses em volta de number | string

Eles são importantes!

Com os parênteses tu diz: um array onde cada item pode ser number ou string

Quer aceitar um terceiro tipo? Só adicionar mais uma barra:

Array só de leitura (readonly)

Tem hora que tu monta um array e não quer que ninguém mexa nele depois

Nem push, nem trocar item, nada

O TypeScript resolve isso com o readonly na frente do tipo

cores.push("amarelo"); // Erro do TypeScript:

Assim que tu marca como readonly, o array vira imutável

Qualquer tentativa de alterar já acusa erro na hora de compilar, antes de virar problema em produção

Massa pra proteger dados que não deveriam mudar, tipo uma lista de configuração

E se cada posição tiver um tipo diferente? (tuplas)

Até aqui todo item do array tinha o mesmo tipo

Mas e quando tu quer um array onde a primeira posição é string e a segunda é number, com ordem fixa?

Isso é uma tupla, e o TypeScript trabalha com ela numa boa

Aqui tu diz: posição 0 é string, posição 1 é number, nessa ordem

Se inverter, dá erro:

Type ‘number’ is not assignable to type ‘string’.

Tupla é bem útil pra retornar mais de um valor de uma função ou pra representar um par de dados sem precisar criar uma interface inteira pra isso

Perguntas frequentes sobre array tipado no TypeScript

Nenhuma na prática, as duas fazem exatamente a mesma coisa: um array de números

Array<number> é a sintaxe de genéricos, que alguns times preferem por deixar o tipo mais explícito

Escolhe a que tu achar mais legível e mantém o padrão no projeto inteiro

Como criar um array de objetos tipado?

Assim cada objeto do array precisa ter as propriedades certas, senão o TypeScript acusa erro

Como tipar um array vazio e preencher depois?

A partir daí o push já vem protegido: número entra, tipo errado dá erro na hora