Eliminación de elementos de un array en TypeScript: 5 formas para principiantes

Eliminación de elementos de un array en TypeScript: de principiante a profesional

¡Hola, futuro gurú de TypeScript! 👋 Si alguna vez has escrito código en TypeScript (o JavaScript) y te has preguntado: "How do I remove an array item in TypeScript?" — no estás solo. Esta pregunta de Stack Overflow ha acumulado miles de visitas, y no es casualidad. Eliminar elementos de un array es una de esas operaciones básicas que, en teoría, debería ser simple, pero en la práctica esconde múltiples trampas.

En este artículo no solo daremos respuestas secas. Analizaremos 5 formas reales de eliminar elementos de un array en TypeScript, desde las más obvias hasta aquellas que quizás no conocías. Aprenderás cuándo usar splice y cuándo filter, por qué delete es malo (casi siempre), y cómo no perder la tipificación en el proceso. ¡Vamos allá!

¿Por qué es importante? (¿Y qué tiene que ver TypeScript?)

Los arrays son la base de cualquier aplicación. Listas de usuarios, carritos de compra, historial de mensajes... todo son arrays. Y saber gestionar su contenido correctamente es una habilidad clave. TypeScript añade una capa adicional: la tipificación. Si eliminas un elemento incorrectamente, el compilador puede no mostrar un error, pero en tiempo de ejecución tu aplicación podría "caerse". Por eso, veremos ejemplos estrictamente en TypeScript, con indicación explícita de tipos.

Vamos a crear un "campo de pruebas": un array con el que trabajaremos:

// Nuestro array de aprendizaje\nconst fruits: string[] = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape', '🍉 Watermelon'];\n\n// Array de objetos tipificado (ejemplo más 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];

Ahora analicemos cada método de eliminación. Responderemos a la pregunta: "How do I remove an array item in TypeScript?" en el contexto de diferentes tareas.

Método n.º 1: splice() — Eliminación "quirúrgica" por índice

El método splice() es una navaja suiza para trabajar con arrays. Puede eliminar, añadir y reemplazar elementos. Pero hoy nos interesa solo la eliminación.

Sintaxis: array.splice(startIndex, deleteCount)

\n
• startIndex — índice desde el que empezar a eliminar.
\n
• deleteCount — cuántos elementos eliminar.
\n

Importante: splice() modifica el array original (lo muta) y devuelve un array con los elementos eliminados.

Ejemplo: eliminar el segundo elemento (Banana)

const myFruits: string[] = [...fruits]; // Creamos una copia para no estropear el original\n\n// Eliminamos 1 elemento, empezando desde el índice 1 (segundo elemento)\nconst removedFruit: string[] = myFruits.splice(1, 1);\n\nconsole.log(myFruits);      // ['🍎 Apple', '🍊 Orange', '🍇 Grape', '🍉 Watermelon']\nconsole.log(removedFruit); // ['🍌 Banana']

Cuándo usarlo: Cuando conoces el índice exacto del elemento que deseas eliminar. Por ejemplo, eliminar un producto del carrito por su número de orden.

Matiz de TypeScript: El tipo del valor devuelto es T[] (un array del mismo tipo que el original). Si intentas eliminar un elemento de un array readonly, TypeScript mostrará un error, ya que splice muta el array.

Método n.º 2: filter() — Eliminación segura por condición (sin mutaciones)

Este es mi método favorito. filter() es un enfoque "funcional". No modifica el array original, sino que crea uno nuevo que contiene solo los elementos que pasan la prueba.