Suppression d'éléments de tableau en TypeScript : 5 méthodes pour débutants

Suppression d'éléments de tableau en TypeScript : du débutant au pro

Bonjour, futur gourou TypeScript ! 👋 Si tu as déjà écrit du code en TypeScript (ou JavaScript) et que tu t'es demandé : "How do I remove an array item in TypeScript?" — tu n'es pas seul. Cette question de Stack Overflow a recueilli des milliers de vues, et ce n'est pas un hasard. Supprimer des éléments d'un tableau est l'une de ces opérations de base qui, en apparence simple, recèle en réalité de nombreux pièges.

Dans cet article, nous ne donnerons pas simplement des réponses sèches. Nous allons analyser 5 méthodes réelles de suppression d'éléments d'un tableau en TypeScript, des plus évidentes à celles que tu ne connais peut-être pas. Tu apprendras quand utiliser splice, et quand utiliser filter, pourquoi delete est mal (presque toujours), et comment ne pas perdre le typage en cours de route. C'est parti !

Pourquoi est-ce important ? (Et quel est le rapport avec TypeScript ?)

Les tableaux sont le fondement de toute application. Liste d'utilisateurs, panier d'achats, historique de messages — tout cela repose sur des tableaux. Et savoir gérer correctement leur contenu est une compétence clé. TypeScript ajoute une couche supplémentaire : le typage. Si tu supprimes un élément de manière incorrecte, le compilateur peut ne pas générer d'erreur, mais ton application pourrait "planter" à l'exécution. C'est pourquoi nous allons examiner des exemples strictement en TypeScript, avec une indication explicite des types.

Créons un "terrain de test" — un tableau avec lequel nous allons travailler :

// Notre tableau d'apprentissage\nconst fruits: string[] = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape', '🍉 Watermelon'];\n\n// Tableau d'objets typé (exemple plus réaliste)\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];

Analysons maintenant chaque méthode de suppression. Nous répondrons à la question : "How do I remove an array item in TypeScript?" dans le contexte de différentes tâches.

Méthode n°1 : splice() — Suppression "chirurgicale" par index

La méthode splice() est un couteau suisse pour travailler avec les tableaux. Elle peut supprimer, ajouter et remplacer des éléments. Mais aujourd'hui, nous nous intéressons uniquement à la suppression.

Syntaxe : array.splice(startIndex, deleteCount)

\n
• startIndex — l'index à partir duquel on commence à supprimer.
\n
• deleteCount — le nombre d'éléments à supprimer.
\n

Important : splice() modifie le tableau d'origine (le mute) et retourne un tableau des éléments supprimés.

Exemple : suppression du deuxième élément (Banana)

const myFruits: string[] = [...fruits]; // Création d'une copie pour ne pas altérer l'original\n\n// Suppression de 1 élément, à partir de l'index 1 (deuxième élément)\nconst removedFruit: string[] = myFruits.splice(1, 1);\n\nconsole.log(myFruits);      // ['🍎 Apple', '🍊 Orange', '🍇 Grape', '🍉 Watermelon']\nconsole.log(removedFruit); // ['🍌 Banana']

Quand l'utiliser : Lorsque tu connais l'index exact de l'élément à supprimer. Par exemple, supprimer un article d'un panier par son numéro d'ordre.

Nuance TypeScript : Le type de la valeur de retour est T[] (un tableau du même type que l'original). Si tu essaies de supprimer un élément d'un tableau readonly, TypeScript générera une erreur, car splice mute le tableau.

Méthode n°2 : filter() — Suppression sécurisée par condition (sans mutation)

C'est ma méthode préférée. filter() est une approche "fonctionnelle". Elle ne modifie pas le tableau d'origine, mais crée un nouveau tableau, contenant uniquement les éléments qui ont passé le test.