05.GenericClasses.md

Generics Classes (Clases genéricas)

← Volver a la tabla de contenido

esta seria una clase en JavaScript que podría almacenar un array, con métodos para agregar, eliminar e imprimir los items del array:

class DataStorage {
  private data = [];

  addItem(item) {
    this.data.push(item);
  }

  removeItem(item) {
    this.data.splice(this.data.indexOf(item), 1);
  }

  getItem(){
    return [...this.data];
  }
}

TypeScript mostraría error al no definir el tipo de dato que tiene item, por ello seria util usar clases Genéricas

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data.splice(this.data.indexOf(item), 1);
  }

  getItem() {
    return [...this.data];
  }
}

con esto se puede usa para diferentes tipos de datos, por ejemplo un string array

const textStorage = new DataStorage<string>();
textStorage.addItem('cesar');
textStorage.addItem('jon doe');
textStorage.removeItem('cesar');
console.log(textStorage.getItem());

si en el caso anterior pusiera un numero mostraría error ya que debe contener un array de strings.

se podría usar la clase para almacenar números también

const numberStorage = new DataStorage<number>();
textStorage.addItem(10);
textStorage.addItem(8);
textStorage.removeItem(10);
console.log(textStorage.getItem());

Existe un problema con esta clase genérica si se intenta almacenar objetos ya que estos son tipos de referencia

const numberStorage = new DataStorage<number>();
textStorage.addItem({ name: 'cesar'});
textStorage.addItem({ name: 'jon doe'});
textStorage.removeItem({ name: 'cesar'});
console.log(textStorage.getItem());

esta clase genérica solo funcionaria con tipos primitivos (string, number, boolean), para tipos de referencia habría que construir una clase mas avanzada. entonces se podría aplicar una restricción a la clase para que solo se pueda usar con tipos de datos primitivos:

class DataStorage<T extends string | number | boolean> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data.splice(this.data.indexOf(item), 1);
  }

  getItem() {
    return [...this.data];
  }
}

---

← Volver a la tabla de contenido