Remoção de elementos de array em TypeScript: 5 maneiras para iniciantes

Remoção de elementos de array em TypeScript: do iniciante ao profissional

Olá, futuro guru do TypeScript! 👋 Se você já escreveu código em TypeScript (ou JavaScript) e se perguntou: "How do I remove an array item in TypeScript?" — você não está sozinho. Esta pergunta do Stack Overflow acumulou milhares de visualizações, e não é por acaso. Remover elementos de um array é uma daquelas operações básicas que, aparentemente, deveria ser simples, mas na prática esconde várias armadilhas.

Neste artigo, não vamos apenas dar respostas secas. Vamos analisar 5 maneiras reais de remover elementos de um array em TypeScript, desde as mais óbvias até aquelas que você talvez não conheça. Você aprenderá quando usar splice e quando usar filter, por que delete é maléfico (quase sempre), e como não perder a tipagem no processo. Vamos nessa!

Por que isso é importante? (E o que o TypeScript tem a ver com isso?)

Arrays são a base de qualquer aplicação. Lista de usuários, carrinho de compras, histórico de mensagens — tudo isso são arrays. E saber gerenciar seu conteúdo de forma eficiente é uma habilidade essencial. O TypeScript adiciona mais uma camada a isso: a tipagem. Se você remover um elemento incorretamente, o compilador pode não emitir um erro, mas em tempo de execução sua aplicação pode "quebrar". Por isso, vamos considerar exemplos estritamente em TypeScript, com a declaração explícita de tipos.

Vamos criar um "campo de testes" — um array com o qual trabalharemos:

// Nosso array de estudo\nconst fruits: string[] = ['🍎 Maçã', '🍌 Banana', '🍊 Laranja', '🍇 Uva', '🍉 Melancia'];\n\n// Array de objetos tipado (exemplo mais realista)\ninterface User {\n  id: number;\n  name: string;\n  role: 'admin' | 'user';\n}\n\nconst users: User[] = [\n  { id: 1, name: 'Alice', role: 'admin' },\n  { id: 2, name: 'Bob', role: 'user' },\n  { id: 3, name: 'Charlie', role: 'user' },\n];

Agora vamos analisar cada método de remoção. Responderemos à pergunta: "How do I remove an array item in TypeScript?" no contexto de diferentes tarefas.

Método nº1: splice() — Remoção "cirúrgica" por índice

O método splice() é um canivete suíço para trabalhar com arrays. Ele pode remover, adicionar e substituir elementos. Mas hoje estamos interessados apenas na remoção.

Sintaxe: array.splice(startIndex, deleteCount)

\n
• startIndex — índice a partir do qual começamos a remover.
\n
• deleteCount — quantos elementos remover.
\n

Importante: splice() modifica o array original (o muta) e retorna um array com os elementos removidos.

Exemplo: removendo o segundo elemento (Banana)

const myFruits: string[] = [...fruits]; // Criamos uma cópia para não estragar o original\n\n// Removemos 1 elemento, começando no índice 1 (segundo elemento)\nconst removedFruit: string[] = myFruits.splice(1, 1);\n\nconsole.log(myFruits);      // ['🍎 Maçã', '🍊 Laranja', '🍇 Uva', '🍉 Melancia']\nconsole.log(removedFruit); // ['🍌 Banana']

Quando usar: Quando você sabe o índice exato do elemento a ser removido. Por exemplo, remover um item do carrinho de compras pelo seu número de ordem.

Nuance do TypeScript: O tipo do valor de retorno é T[] (um array do mesmo tipo que o original). Se você tentar remover um elemento de um array readonly, o TypeScript emitirá um erro, pois splice muta o array.

Método nº2: filter() — Remoção segura por condição (sem mutações)

Este é o meu método favorito. filter() é uma abordagem "funcional". Ele não altera o array original, mas cria um novo, contendo apenas os elementos que passaram no teste.