Удаление элементов массива в TypeScript: 5 способов для новичков

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Удаление элементов массива в TypeScript: от новичка до профи

Привет, будущий TypeScript-гуру! 👋 Если ты когда-нибудь писал код на TypeScript (или JavaScript) и задавался вопросом: "How do I remove an array item in TypeScript?" — ты не одинок. Этот вопрос из Stack Overflow собрал тысячи просмотров, и это не случайно. Удаление элементов из массива — одна из тех базовых операций, которая, казалось бы, должна быть простой, но на деле таит в себе множество подводных камней.

В этой статье мы не просто дадим сухие ответы. Мы разберём 5 реальных способов удаления элементов из массива в TypeScript, от самых очевидных до тех, о которых ты мог не знать. Ты узнаешь, когда использовать splice, а когда filter, почему delete — это зло (почти всегда), и как не потерять типизацию в процессе. Поехали!

Почему это важно? (И при чём тут TypeScript?)

Массивы — это фундамент любого приложения. Список пользователей, корзина товаров, история сообщений — всё это массивы. И умение грамотно управлять их содержимым — ключевой навык. TypeScript добавляет к этому ещё один слой: типизацию. Если ты удалишь элемент неправильно, компилятор может не выдать ошибку, но в рантайме твоё приложение может "упасть". Поэтому мы будем рассматривать примеры строго на TypeScript, с явным указанием типов.

Давай создадим "тестовый полигон" — массив, с которым будем работать:

// Наш учебный массив
const fruits: string[] = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape', '🍉 Watermelon'];

// Типизированный массив объектов (более реалистичный пример)
interface User {
  id: number;
  name: string;
  role: 'admin' | 'user';
}

const users: User[] = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'user' },
  { id: 3, name: 'Charlie', role: 'user' },
];

Теперь разберём каждый способ удаления. Мы будем отвечать на вопрос: "How do I remove an array item in TypeScript?" в контексте разных задач.

Способ №1: splice() — "Хирургическое" удаление по индексу

Метод splice() — это швейцарский нож для работы с массивами. Он может удалять, добавлять и заменять элементы. Но сегодня нас интересует только удаление.

Синтаксис: array.splice(startIndex, deleteCount)

startIndex — индекс, с которого начинаем удалять.
deleteCount — сколько элементов удалить.

Важно: splice() изменяет оригинальный массив (мутирует его) и возвращает массив удалённых элементов.

Пример: удаляем второй элемент (Banana)

const myFruits: string[] = [...fruits]; // Создаём копию, чтобы не испортить оригинал

// Удаляем 1 элемент, начиная с индекса 1 (второй элемент)
const removedFruit: string[] = myFruits.splice(1, 1);

console.log(myFruits);      // ['🍎 Apple', '🍊 Orange', '🍇 Grape', '🍉 Watermelon']
console.log(removedFruit); // ['🍌 Banana']

Когда использовать: Когда ты знаешь точный индекс элемента, который нужно удалить. Например, удаление товара из корзины по его порядковому номеру.

Нюанс TypeScript: Тип возвращаемого значения — T[] (массив того же типа, что и исходный). Если ты попытаешься удалить элемент из readonly массива, TypeScript выдаст ошибку, так как splice мутирует массив.

Способ №2: filter() — Безопасное удаление по условию (без мутаций)

Это мой любимый способ. filter() — это "функциональный" подход. Он не изменяет исходный массив, а создаёт новый, содержащий только те элементы, которые прошли проверку.

Синтаксис: const newArray = array.filter(callback(element, index, array) => условие)

Если условие возвращает true — элемент остаётся в новом массиве. Если false — элемент "отфильтровывается" (удаляется).

Пример: удаляем пользователя по id

// Удаляем пользователя с id = 2 (Bob)
const updatedUsers: User[] = users.filter(user => user.id !== 2);

console.log(updatedUsers);
// [
//   { id: 1, name: 'Alice', role: 'admin' },
//   { id: 3, name: 'Charlie', role: 'user' }
// ]
// Оригинальный массив users остался неизменным!

Пример: удаляем все фрукты, кроме яблок

const onlyApples: string[] = fruits.filter(fruit => fruit.includes('Apple'));
console.log(onlyApples); // ['🍎 Apple']

Когда использовать: Почти всегда, когда тебе нужно удалить элемент по какому-то признаку (по значению, по свойству объекта). Это самый безопасный и предсказуемый способ.

Почему это круто для TypeScript: Типизация работает идеально. TypeScript сам выведет тип нового массива, и ты не потеряешь информацию о типах.

Способ №3: pop() и shift() — Удаление с начала или с конца

Эти методы — "близнецы-братья", но работают с разных сторон массива.

pop() — удаляет последний элемент и возвращает его.
shift() — удаляет первый элемент и возвращает его.

Оба метода мутируют исходный массив.

Пример с pop()

const stack: number[] = [10, 20, 30, 40];
const lastElement: number | undefined = stack.pop();

console.log(lastElement); // 40
console.log(stack);       // [10, 20, 30]

Пример с shift()

const queue: string[] = ['first', 'second', 'third'];
const firstElement: string | undefined = queue.shift();

console.log(firstElement); // 'first'
console.log(queue);        // ['second', 'third']

Когда использовать: Когда массив используется как стек (LIFO — Last In, First Out) для pop, или как очередь (FIFO — First In, First Out) для shift. В реальных проектах — обработка событий, управление историей.

Важный нюанс TypeScript: Возвраща