Removing Array Elements in TypeScript: 5 Ways for Beginners

Removing Array Elements in TypeScript: From Beginner to Pro

Hello, future TypeScript guru! 👋 If you've ever written code in TypeScript (or JavaScript) and wondered: "How do I remove an array item in TypeScript?" — you're not alone. This question on Stack Overflow has gathered thousands of views, and for good reason. Removing elements from an array is one of those basic operations that seems simple but actually hides many pitfalls.

In this article, we won't just give dry answers. We'll break down 5 real ways to remove elements from an array in TypeScript, from the most obvious to ones you might not know. You'll learn when to use splice and when to use filter, why delete is evil (almost always), and how not to lose typing in the process. Let's go!

Why is this important? (And what does TypeScript have to do with it?)

Arrays are the foundation of any application. User lists, shopping carts, message history — all of these are arrays. And the ability to manage their contents skillfully is a key skill. TypeScript adds another layer to this: typing. If you delete an element incorrectly, the compiler might not throw an error, but your application could "crash" at runtime. Therefore, we will look at examples strictly in TypeScript, with explicit type annotations.

Let's create a "test polygon" — an array we'll work with:

// Our training array\nconst fruits: string[] = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape', '🍉 Watermelon'];\n\n// Typed array of objects (a more realistic example)\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];

Now let's break down each removal method. We will answer the question: "How do I remove an array item in TypeScript?" in the context of different tasks.

Method #1: splice() — "Surgical" Removal by Index

The splice() method is a Swiss Army knife for working with arrays. It can remove, add, and replace elements. But today we are only interested in removal.

Syntax: array.splice(startIndex, deleteCount)

\n
• startIndex — the index from which to start removing.
\n
• deleteCount — how many elements to remove.
\n

Important: splice() modifies the original array (mutates it) and returns an array of the removed elements.

Example: removing the second element (Banana)

const myFruits: string[] = [...fruits]; // Create a copy to avoid modifying the original\n\n// Remove 1 element starting from index 1 (the second element)\nconst removedFruit: string[] = myFruits.splice(1, 1);\n\nconsole.log(myFruits);      // ['🍎 Apple', '🍊 Orange', '🍇 Grape', '🍉 Watermelon']\nconsole.log(removedFruit); // ['🍌 Banana']

When to use: When you know the exact index of the element you need to remove. For example, removing an item from a shopping cart by its sequence number.

TypeScript nuance: The return type is T[] (an array of the same type as the original). If you try to remove an element from a readonly array, TypeScript will throw an error because splice mutates the array.

Method #2: filter() — Safe Removal by Condition (No Mutations)

This is my favorite method. filter() is a "functional" approach. It does not modify the original array, but creates a new one containing only the elements that passed the test.