Étendre un Array en TypeScript

Question

Comment ajouter une méthode à un type de base, disons Array? Dans le module global, cela sera reconnu

interface Array {
   remove(o): Array;
}

Mais où mettre l'implémentation réelle?

Answer 1

Vous pouvez utiliser le prototype pour étendre Array:

interface Array {
    remove(o: T): Array;
}

Array.prototype.remove = function (o) {
    // code pour supprimer "o"
    return this;
}

Si vous êtes dans un module, vous devrez préciser que vous faites référence au Array global, et non pas créer une interface locale Array dans votre module:

declare global {
    interface Array {
        remove(o: T): Array;
    }
}

Answer 2

déclarer global semble être la solution à partir de TypeScript 2.1. Notez que Array.prototype est de type any[], donc si vous voulez que l'implémentation de votre fonction soit vérifiée pour la cohérence, il est préférable d'ajouter vous-même un paramètre de type générique.

déclarer global {
  interface Array {
    remove(elem: T): Array;
  }
}

if (!Array.prototype.remove) {
  Array.prototype.remove = function(this: T[], elem: T): T[] {
    return this.filter(e => e !== elem);
  }
}

Answer 3

Ajoutant à la réponse de Rikki Gibson,

export {}

declare global {
    interface Array {
        remove(elem: T): Array;
    }
}

if (!Array.prototype.remove) {
  Array.prototype.remove = function(elem: T): T[] {
      return this.filter(e => e !== elem);
  }
}

Sans le export {}, vous obtiendrez l'erreur TS :

Les ajouts pour la portée globale ne peuvent être directement imbriqués que dans des modules externes ou des déclarations de modules ambiants.

Answer 4

À partir de TypeScript 1.6, vous pouvez étendre "nativement" des expressions arbitraires comme des types intégrés.

Nouveautés de TypeScript:

TypeScript 1.6 ajoute la prise en charge des classes étendant une expression arbitraire qui calcule une fonction constructeur. Cela signifie que les types intégrés peuvent désormais être étendus dans les déclarations de classe.

La clause extends d'une classe nécessitait précédemment une référence de type à spécifier. Elle accepte maintenant une expression suivie en option par une liste d'arguments de type. Le type de l'expression doit être un type de fonction constructeur avec au moins une signature de construction qui a le même nombre de paramètres de type que le nombre d'arguments de type spécifiés dans la clause extends. Le type de retour de la ou des signatures de construction correspondantes est le type de base dont le type d'instance de classe hérite. En pratique, cela permet de spécifier à la fois des vraies classes et des expressions "similaires à des classes" dans la clause extends.

// Etendre les types intégrés

class MyArray extends Array { }
class MyError extends Error { }

// Étendre une classe de base calculée

class ThingA {
    getGreeting() { return "Bonjour de A"; }
}

class ThingB {
    getGreeting() { return "Bonjour de B"; }
}

interface Greeter {
    getGreeting(): string;
}

interface GreeterConstructor {
    new (): Greeter;
}

function getGreeterBase(): GreeterConstructor {
    return Math.random() >= 0.5 ? ThingA : ThingB;
}

class Test extends getGreeterBase() {
    sayHello() {
        console.log(this.getGreeting());
    }
}

Answer 5

Extension de Array

Voici un exemple d'extension de Array et d'ajout de la méthode remove à celle-ci. Il s'agit d'un exemple en JavaScript

/** @template T */
class List extends Array {
  /**
   * Supprime un élément de la liste et renvoie l'élément supprimé
   * @param {T} item
   * @return {T}
   */
  remove(item) {
    const index = this.indexOf(item);
    if (index === -1) {
      throw new Error(`${item} non présent dans la liste`);
    }
    this.splice(index, 1);
    return item;
  }
}

const arr = new List(1, 2, 3);
console.log(arr.remove(3)); // 3
console.log(arr); // [1, 2]

Et voici un exemple en TypeScript.

J'ai ajouté un constructeur et j'ai ajouté les arguments à l'array. (Impossible de le faire avec super(...items)!)

class List extends Array {
  constructor(...items: T[]) {
    super();
    this.push(...items);
  }

  public remove(item: T): T {
    const index = this.indexOf(item);
    if (index === -1) {
      throw new Error(`${item} non présent dans la liste`);
    }
    this.splice(index, 1);
    return item;
  }
}