Bendrieji vaistai, esantys TypeScript

Bendrines funkcijas galima naudoti kartu su funkcijomis (sukuriant bendrąją funkciją), klasėmis (sukuriant bendrąją klasę) ir sąsajomis (sukuriant bendrąją sąsają).

Pagrindinis naudojimas

Tikriausiai praeityje naudojote generinius kodus net to nežinodami - dažniausiai generiniai kodai naudojami deklaruojant masyvą:

const myArray: string[];

Iš pirmo žvilgsnio tai nėra pernelyg ypatinga, mes tiesiog deklaruojame myArray kaip eilutės masyvą, tačiau tai yra tas pats, kas ir bendroji deklaracija:

const myArray: Array;

Aiškios nuostatos

Pradėkime nuo labai paprasto pavyzdžio - kaip galėtume perkelti šį vanilinį JS funkciją į TypeScript:

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

Ši funkcija grąžins masyvą, užpildytą nurodytu kiekiu užpildas, todėl ilgis bus numeris ir visa funkcija grąžins masyvą užpildas - bet kas yra užpildas? Šiuo metu tai gali būti bet kas, todėl viena iš galimybių yra naudoti bet kuris:

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

Naudojant bet kuris tikrai yra bendras - galime perduoti tiesiogine prasme bet ką, todėl apibrėžimo nuostata “dirbti su keliais tipais, o ne su vienu tipu” yra visiškai įvykdyta, tačiau prarandame ryšį tarp užpildas tipą ir grąžinimo tipą. Šiuo atveju norime grąžinti kokį nors bendrą dalyką ir galime aiškiai apibrėžti šį bendrą dalyką kaip tipo parametras:

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

ir naudokite taip:

const prefilledArray = getPrefiledArray(0, 10);

Bendrieji apribojimai

Panagrinėkime kitus, tikriausiai dažniau pasitaikančius atvejus. Kodėl mes iš tikrųjų naudojame tipus funkcijose? Man - tam, kad užtikrintume, jog funkcijai perduodami argumentai turės tam tikras savybes, su kuriomis noriu sąveikauti.

Dar kartą pabandykime perkelti paprastą vanilinę JS funkciją į TS.

funkcija getLength(thing) {
    return thing.length;
}

Turime netrivialų galvosūkį - kaip užtikrinti, kad daiktas turėtų ilgis savybė, ir pirma mintis gali būti, kad reikia daryti kažką panašaus į:

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

ir, priklausomai nuo konteksto, tai gali būti teisinga, apskritai mes esame šiek tiek bendri - tai veiks su kelių tipų masyvais, bet ką daryti, jei iš tikrųjų nežinome, ar daiktas visada turėtų būti masyvas - galbūt daiktas yra futbolo aikštė arba banano žievelė? Tokiu atveju turime surinkti bendrąsias to daikto savybes į konstrukciją, galinčią apibrėžti objekto savybes - sąsają:

sąsaja IThingWithLength {
  length: skaičius;
}

Galime naudoti IThingWithLength sąsaja kaip tipas dalykas parametras:

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

atvirai kalbant, šiame paprastame pavyzdyje tai bus visiškai gerai, bet jei norime, kad šis tipas būtų bendras, ir nesusidurtume su pirmojo pavyzdžio problema, galime naudoti Bendrieji apribojimai:

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

ir naudokite jį:

sąsaja IBananaPeel {
  storis: skaičius;
  ilgis: skaičius;
}

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

Naudojant išplečia užtikrina, kad T bus pateiktos savybės, kurias apibrėžia IThingWithLength.

Bendrosios klasės

Iki šiol dirbome su bendrosiomis funkcijomis, tačiau tai ne vienintelė vieta, kur bendrinės funkcijos yra puikios, todėl pažiūrėkime, kaip galime jas įtraukti į klases.

Pirmiausia pabandykime bananų krepšelyje laikyti bananų kekę:

klasė Banana {
  konstruktorius(
    public length: skaičius,
    public color: string,
    public jonizingRadiation: number
  ) {}
}

klasė 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));

Dabar pabandykime sukurti bendros paskirties krepšelį, į skirtingus dalykus su tuo pačiu tipu:

klasė Basket {
  private stuff: T[] = [];

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

const bananaBasket = new Basket();

Ir galiausiai, tarkime, kad mūsų krepšys yra radioaktyviųjų medžiagų talpykla ir kad jame galime laikyti tik tokias medžiagas, kurios turi jonizuojančioji spinduliuotė nuosavybė:

sąsaja IRadioactive {
  ionizingRadiation: number;
}

klasė RadioactiveContainer {
  private stuff: T[] = [];

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

Bendroji sąsaja

Galiausiai pabandykime surinkti visas žinias ir sukurti radioaktyvią imperiją, taip pat naudodami bendrąsias sąsajas:

// Apibrėžti bendrus konteinerių atributus
sąsaja IRadioactive {
  ionizingRadiation: number;
}


// Apibrėžti kažką, kas yra radioaktyvus
sąsaja IBanana extends IRadioactive {
  ilgis: skaičius;
  spalva: string;
}

// Apibrėžti kažką, kas nėra radioaktyvus
sąsaja IDog {
  weight: skaičius;
}

// Apibrėžkite konteinerio, kuriame gali būti tik radioaktyvūs daiktai, sąsają
sąsaja IRadioactiveContainer {
  add(thing: T): void;
  getRadioactiveness(): skaičius;
}

// Apibrėžti klasę, įgyvendinančią radioaktyvaus konteinerio sąsają
Klasė Radioaktyvus konteineris implements IRadioactiveContainer {
  private stuff: T[] = [];

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

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

// KLAIDA! Tipas 'IDog' neatitinka apribojimo 'IRadioactive
// Ir gana žiauru laikyti šunis radioaktyviajame konteineryje
const dogsContainer = new RadioactiveContainer();

// Viskas gerai!
const radioactiveContainer = new RadioactiveContainer();

// Nepamirškite rūšiuoti radioaktyviųjų atliekų - sukurkite atskirą šiukšliadėžę tik bananams
const bananasContainer = new RadioactiveContainer();

Tai viskas, žmonės!