Tipar Array no TypeScript: Guia Prático
Todas as formas de tipar arrays no TypeScript. De Type[] até tuplas, com exemplos que você copia e usa.
Por que isso é importante
Tipar Array no TypeScript: Guia Prático. Todas as formas de tipar arrays no TypeScript. De Type[] até tuplas, com exemplos que você copia e usa.
O Que É Tipagem de Array no TypeScript
No JavaScript puro, um array aceita qualquer coisa. Strings, números, objetos, null, tudo misturado. Isso é liberdade demais e gera problemas difíceis de rastrear.
No TypeScript, você diz pro compilador exatamente o que aquele array vai conter. Se alguém tentar enfiar um número num array de strings, o erro aparece antes de rodar o código. Isso é ouro.
Existem várias formas de tipar array no TypeScript. Cada uma tem seu lugar. Dá pra usar a syntax com colchetes (string[]), a syntax genérica (Array
O segredo é escolher a forma certa pro contexto certo. Vamos ver cada uma delas na prática.
Como Tipar Array Passo a Passo
Segue esse roteiro e você cobre todos os cenários de array que aparecem no dia a dia:
- Passo 1: Defina o tipo dos elementos. Pergunte: 'esse array vai guardar o quê?' Strings? Números? Objetos? Isso define tudo.
- Passo 2: Escolha a syntax. Use
string[]pra arrays simples (mais comum e legível). UseArray<string>quando o tipo interno for complexo. - Passo 3: Array não pode mudar? Use
readonly. Isso impede push, pop e qualquer mutação acidental. - Passo 4: Tamanho fixo e tipos diferentes por posição? Use tupla:
[string, number]. - Passo 5: Array de objetos? Crie uma interface ou type pro objeto primeiro, depois faça
User[]. - Passo 6: Teste a tipagem tentando inserir um valor errado. Se o TypeScript reclamar, tá funcionando.
Exemplos Práticos
Vamos começar pelo básico e ir subindo a complexidade:
// Syntax com colchetes - a mais usada
const nomes: string[] = ["Ana", "Carlos", "Julia"];
const idades: number[] = [25, 30, 22];
const flags: boolean[] = [true, false, true];
// Syntax genérica - útil com tipos complexos
const ids: Array<string | number> = [1, "abc", 42, "xyz"];
// As duas formas são idênticas pro compilador
const a: string[] = ["ok"];
const b: Array<string> = ["ok"]; // mesma coisa
Agora readonly arrays. Perfeito quando você não quer que ninguém mexa no array:
// Readonly array - não aceita push, pop, splice...
const cores: readonly string[] = ["red", "blue", "green"];
// cores.push("yellow"); // ERRO! Property 'push' does not exist
// ReadonlyArray genérico - mesma coisa
const numeros: ReadonlyArray<number> = [1, 2, 3];
// numeros[0] = 99; // ERRO! Index signature only permits reading
// as const - transforma tudo em readonly literal
const status = ["active", "inactive", "banned"] as const;
// tipo: readonly ["active", "inactive", "banned"]
Tuplas: arrays com tamanho fixo e tipos por posição.
// Tupla simples
type Coordinate = [number, number];
const ponto: Coordinate = [10, 20];
// Tupla com tipos diferentes
type UserEntry = [number, string, boolean];
const entry: UserEntry = [1, "Ana", true];
// Tupla com label (TypeScript 4.0+)
type Range = [start: number, end: number];
const faixa: Range = [0, 100];
// Tupla com rest
type StringsComNumero = [number, ...string[]];
const data: StringsComNumero = [42, "a", "b", "c"];
E o que todo mundo precisa no dia a dia: array de objetos.
// Interface pro objeto
interface Product {
id: number;
name: string;
price: number;
inStock: boolean;
}
// Array de objetos
const products: Product[] = [
{ id: 1, name: "Teclado", price: 299.90, inStock: true },
{ id: 2, name: "Mouse", price: 149.90, inStock: false },
];
// Função que recebe array de objetos
function getTotal(items: Product[]): number {
return items.reduce((sum, item) => sum + item.price, 0);
}
// Array de objetos aninhados
interface Order {
id: number;
items: Product[];
customer: { name: string; email: string };
}
Erros Comuns
Armadilhas que pegam todo mundo
Erro 1: Usar any[] como 'solução rápida'. Isso desliga a tipagem do array inteiro. Você perde todo o benefício do TypeScript.
Erro 2: Esquecer de tipar arrays vazios. 'const items = []' vira never[] e você não consegue dar push de nada. Sempre faça 'const items: string[] = []'.
Erro 3: Confundir tupla com array. [string, number] aceita exatamente 2 elementos nessa ordem. string[] aceita qualquer quantidade de strings. São coisas diferentes.
Erro 4: Mutar array readonly via cast. 'as string[]' remove o readonly, mas esconde bugs. Se definiu como readonly, respeite.
Erro 5: Não tipar o retorno de .map() e .filter(). O TypeScript infere na maioria dos casos, mas com objetos complexos vale tipar explicitamente pra ter autocomplete correto.
Checklist: Tipagem de Arrays
- Defini o tipo dos elementos antes de criar o array.
- Usei string[] pra tipos simples e Array
pra tipos complexos. - Arrays que não devem mudar estão marcados como readonly.
- Tuplas têm tipos e tamanho corretos definidos.
- Arrays de objetos usam interface ou type separado.
- Nenhum array está tipado como any[].
- Arrays vazios têm tipagem explícita.
- Testei inserindo valor errado pra confirmar que o TypeScript pega o erro.
Leve sua tipagem pro próximo nível
Tipar arrays direito é o primeiro passo. No CrazyStack, você usa TypeScript de ponta a ponta num projeto profissional: APIs tipadas em Node.js, componentes React com props corretas, formulários validados, banco de dados com Prisma.
Você sai do curso com um SaaS completo funcionando. Não é exercício de sala de aula. É código que vai pro ar e começa a rodar no dia seguinte.
Perguntas frequentes
O Que É Tipagem de Array no TypeScript
No JavaScript puro, um array aceita qualquer coisa. Strings, números, objetos, null, tudo misturado. Isso é liberdade demais e gera problemas difíceis de rastrear. No TypeScript, você diz pro compilador exatamente o que aquele array vai conter. Se alguém tentar enfiar um número num array de strings, o erro aparece antes de rodar o código. Isso é ouro. Existem várias formas de tipar array no TypeScript. Cada uma tem seu lugar. Dá pra usar a syntax com colchetes (string[]), a syntax genérica (Array ), criar arrays somente leitura, tuplas com tamanho fixo e até arrays de objetos complexos.
Como Tipar Array Passo a Passo
Segue esse roteiro e você cobre todos os cenários de array que aparecem no dia a dia: