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<string>), criar arrays somente leitura, tuplas com tamanho fixo e até arrays de objetos complexos.
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:
string[] pra arrays simples (mais comum e legível). Use Array<string> quando o tipo interno for complexo.readonly. Isso impede push, pop e qualquer mutação acidental.[string, number].User[].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
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.
Continue lendo
Como Tipar Objeto no TypeScript
A tipar objetos no TypeScript com interface, type e index signatures.
Como Usar Generics no TypeScript
Domine generics no TypeScript pra criar código reutilizável e type-safe.
Como Tipar Variáveis no TypeScript
Guia direto pra tipar variáveis no TypeScript sem complicação.
Interface no TypeScript
Quando usar interface