Generika v TypeScript

Generika lze použít ve spojení s funkcemi (vytvoření generické funkce), třídami (vytvoření generické třídy) a rozhraními (vytvoření generického rozhraní).

Základní použití

Pravděpodobně jste v minulosti použili generika, aniž byste o tom věděli - nejčastějším použitím generik je deklarace pole:

const myArray: string[];

Na první pohled to není nic zvláštního, jen prohlašujeme. myArray jako pole řetězců, ale je to stejné jako obecná deklarace:

const myArray: Array;

Zachování explicitnosti

Začněme velmi jednoduchým příkladem - jak bychom mohli tuto vanilla JS funkci přenést do funkce TypeScript:

funkce getPrefiledArray(filler, length) {
    return (new Array(length)).fill(filler);
}

Tato funkce vrátí pole naplněné daným množstvím výplň, takže délka bude číslo a celá funkce vrátí pole výplň - ale co je to výplň? V tuto chvíli to může být cokoli, takže jednou z možností je použít jakýkoli:

function getPrefiledArray(filler: any, length: number): any[] {
    return (new Array(length)).fill(filler);
}

Používání stránek jakýkoli je jistě obecný - můžeme mu předat doslova cokoli, takže "práce s více typy místo s jedním typem" z definice je plně pokryta, ale ztrácíme vazbu mezi výplň a návratový typ. V tomto případě chceme vrátit nějakou společnou věc a tuto společnou věc můžeme explicitně definovat jako parametr typu:

funkce getPrefiledArray(filler: T, length: number): T[] {
    return (new Array(length)).fill(filler);
}

a použijte je takto:

const prefilledArray = getPrefiledArray(0, 10);

Obecná omezení

Podívejme se na jiné, pravděpodobně častější případy. Proč vlastně používáme typy ve funkcích? Pro mě je to proto, abych zajistil, že argumenty předávané funkci budou mít nějaké vlastnosti, se kterými chci interagovat.

Ještě jednou se pokusíme přenést jednoduchou funkci vanilla JS do TS.

funkce getLength(věc) {
    return thing.length;
}

Máme netriviální hádanku - jak zajistit, aby věc měla. délka a první myšlenkou může být něco jako:

funkce getLength(thing: typeof Array):number {
    return thing.length;
}

a v závislosti na kontextu to může být správně, celkově jsme trochu obecní - bude to fungovat s poli více typů, ale co když opravdu nevíme, jestli má být věc vždy pole - třeba je věc fotbalové hřiště nebo slupka od banánu? V takovém případě musíme shromáždit společné vlastnosti dané věci do konstrukce, která může definovat vlastnosti objektu - rozhraní:

rozhraní IThingWithLength {
  length: číslo;
}

Můžeme použít IThingWithLength jako typ rozhraní věc parametr:

funkce getLength(thing: IThingWithLength):number {
    return thing.length;
}

upřímně řečeno, v tomto jednoduchém příkladu to bude naprosto v pořádku, ale pokud chceme, aby tento typ byl obecný a neřešil se problém z prvního příkladu, můžeme použít typ Obecná omezení:

funkce getLength(thing: T):number {
    return thing.length;
}

a používat ji:

rozhraní IBananaPeel {
  thickness: číslo;
  délka: číslo;
}

const bananaPeel: IBananaPeel = {thickness: 0.2, length: 3.14};
getLength(bananaPeel);

Používání stránek rozšiřuje zajišťuje, že T bude obsahovat vlastnosti, které jsou definovány pomocí IThingWithLength.

Obecné třídy

Až do této chvíle jsme pracovali s generickými funkcemi, ale to není jediné místo, kde generika září, podívejme se, jak je můžeme začlenit do tříd.

Nejdříve si vyzkoušejte uložit trs banánů do košíku na banány:

třída Banana {
  constructor(
    public length: číslo,
    public color: string,
    public ionizingRadiation: number
  ) {}
}

class BananaBasket {
  private bananas: Banana[] = [];

  add(banana: Banana): void {
    this.bananas.push(banana);
  }
}

const bananaBasket = new BananaBasket();
bananaBasket.add(new Banana(3.14, 'red', 10e-7));

Nyní se pokusíme vytvořit koš pro všeobecné použití, pro různé věci stejného typu:

třída Basket {
  private stuff: T[] = [];

  add(věc: T): void {
    this.stuff.push(thing);
  }
}

const bananaBasket = new Basket();

A konečně, předpokládejme, že náš koš je kontejnerem na radioaktivní materiál a že do něj můžeme ukládat pouze hmotu, která má ionizující záření nemovitosti:

rozhraní IRadioactive {
  ionizingRadiation: number;
}

class RadioactiveContainer {
  private stuff: T[] = [];

  add(thing: T): void {
    this.stuff.push(thing);
  }
}

Obecné rozhraní

Nakonec se pokusíme shromáždit všechny naše znalosti a vybudovat radioaktivní říši také pomocí generických rozhraní:

// Definice společných atributů pro kontejnery
interface IRadioactive {
  ionizingRadiation: number;
}


// Definujte něco, co je radioaktivní
interface IBanana extends IRadioactive {
  length: number;
  color: string;
}

// Definujte něco, co není radioaktivní
rozhraní IDog {
  weight: number;
}

// Definujte rozhraní pro kontejner, který může obsahovat pouze radioaktivní věci.
interface IRadioactiveContainer {
  add(thing: T): void;
  getRadioactiveness():number;
}

// Definujte třídu implementující rozhraní radioaktivního kontejneru
třída RadioactiveContainer implements IRadioactiveContainer {
  private stuff: T[] = [];

  add(thing: T): void {
    this.stuff.push(thing);
  }

  getRadioactiveness(): number {
      return this.stuff.reduce((a, b) => a + b.ionizingRadiation, 0)
  }
}

// CHYBA! Typ 'IDog' nesplňuje omezení 'IRadioactive'
// A je docela brutální ukládat psy uvnitř radioaktivního kontejneru
const dogsContainer = new RadioactiveContainer();

// Všechno v pořádku, rodino!
const radioactiveContainer = new RadioactiveContainer();

// Nezapomeňte třídit radioaktivní odpad - vytvořte samostatný koš pouze pro banány.
const bananasContainer = new RadioactiveContainer();

To je vše, přátelé!