TypeScript vispārīgie nosaukumi

Ģenerikas var izmantot kopā ar funkcijām (izveidojot ģenerisku funkciju), klasēm (izveidojot ģenerisku klasi) un saskarnēm (izveidojot ģenerisku saskarni).

Pamata lietošana

Iespējams, ka agrāk esat izmantojuši ģenēriskos kodus, pat to nezinot - visbiežāk ģenēriskie kodi tiek izmantoti, deklarējot masīvu:

const myArray: string[];

No pirmā acu uzmetiena tas nav pārāk īpašs, mēs tikai paziņojam. myArray kā virkņu masīvu, bet tas ir tas pats, kas vispārīgā deklarācija:

const myArray: masīvs;

Viennozīmīgu lietu saglabāšana

Sāksim ar ļoti vienkāršu piemēru - kā mēs varētu pārnest šo vaniļas JS funkciju, lai TypeScript:

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

Šī funkcija atgriezīs masīvu, kas piepildīts ar norādīto daudzumu pildviela, tāpēc garums būs numurs un visa funkcija atgriezīs masīvu pildviela - bet kas ir pildviela? Šobrīd tas var būt jebkas, tāpēc viena no iespējām ir izmantot jebkurš:

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

Izmantojot jebkurš noteikti ir vispārīgs - mēs varam nodot burtiski jebko, tāpēc definīcija “strādāt ar vairākiem tipiem, nevis ar vienu tipu” ir pilnībā ietverta, bet mēs zaudējam saikni starp pildviela tips un atgriešanas tips. Šajā gadījumā mēs vēlamies atgriezt kādu kopīgu lietu, un mēs varam skaidri definēt šo kopīgo lietu kā tipa parametrs:

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

un izmantot šādi:

const prefilledArray = getPrefiledArray(0, 10);

Vispārīgi ierobežojumi

Aplūkosim citus, iespējams, biežāk sastopamus gadījumus. Kāpēc mēs patiesībā izmantojam tipus funkcijās? Man tas ir, lai nodrošinātu, ka funkcijai nodotajiem argumentiem būs kādas īpašības, ar kurām es vēlos mijiedarboties.

Vēlreiz mēģināsim pārnest vienkāršu vaniļas JS funkciju uz TS.

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

Mums ir netriviāla mīkla - kā nodrošināt, ka lieta ir garums īpašumu, un pirmā doma var būt, ka jādara kaut kas līdzīgs:

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

un atkarībā no konteksta tas varētu būt pareizi, kopumā mēs esam mazliet vispārīgi - tas darbosies ar vairāku tipu masīviem, bet ko darīt, ja mēs īsti nezinām, vai lietai vienmēr jābūt masīvam - varbūt lieta ir futbola laukums vai banāna miziņa? Šādā gadījumā mums ir jāapkopo šīs lietas kopīgās īpašības tādā konstrukcijā, kas var definēt objekta īpašības - interfeisā:

interfeiss IThingWithLength {
  garums: skaitlis;
}

Mēs varam izmantot IThingWithLength interfeiss kā tips lieta parametrs:

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

šajā vienkāršajā piemērā tas būs pilnīgi kārtībā, bet, ja mēs vēlamies, lai šis tips būtu vispārīgs un nerastos pirmajā piemērā minētā problēma, mēs varam izmantot Vispārīgi ierobežojumi:

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

un izmantot to:

interfeiss IBananaPeel {
  biezums: skaits;
  garums: skaits;
}

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

Izmantojot paplašina nodrošina, ka T saturēs īpašības, kas definētas ar IThingWithLength.

Vispārīgās klases

Līdz šim mēs strādājām ar vispārīgajām funkcijām, bet tā nav vienīgā vieta, kur vispārīgās funkcijas spīd, tāpēc paskatīsimies, kā mēs varam tās iekļaut klasēs.

Vispirms mēģināsim banānu grozā uzglabāt banānu ķekarus:

klase Banāns {
  konstruktors(
    public length: numurs,
    public color: string,
    public ionizingRadiation: number
  ) {}
}

klase 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));

Tagad mēģināsim izveidot vispārējas nozīmes grozu, lai dažādas lietas ar to pašu tipu:

klase Grozs {
  private stuff: T[] = [];

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

const bananaBasket = new Basket();

Un visbeidzot, pieņemsim, ka mūsu grozs ir radioaktīvo materiālu konteiners un mēs varam uzglabāt tikai tādas vielas, kurām ir. jonizējošā radiācija īpašums:

interfeiss IRadioactive {
  ionizingRadiation: skaits;
}

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

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

Vispārīgā saskarne

Visbeidzot, mēģināsim apkopot visas savas zināšanas un izveidot radioaktīvo impēriju, izmantojot arī vispārīgās saskarnes:

// Definēt konteineru kopīgos atribūtus
interfeiss IRadioactive {
  ionizingRadiation: number;
}


// Definē kaut ko, kas ir radioaktīvs
interfeiss IBanana extends IRadioactive {
  garums: skaits;
  color: string;
}

// Definē kaut ko, kas nav radioaktīvs
Interfeiss IDog {
  weight: skaitlis;
}

// Definē interfeisu konteineram, kurā var glabāt tikai radioaktīvas lietas
interfeiss IRadioactiveContainer {
  add(thing: T): void;
  getRadioactiveness():number;
}

// Definēt klasi, kas īsteno radioaktīvā konteinera saskarni
klase 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)
  }
}

// KĻŪDA! Tips 'IDog' neatbilst ierobežojumam 'IRadioactive'
// Un ir diezgan brutāli glabāt suņus radioaktīvā konteinerā.
const dogsContainer = new RadioactiveContainer();

// All good fam!
const radioactiveContainer = new RadioactiveContainer();

// Neaizmirstiet šķirot radioaktīvos atkritumus - izveidojiet atsevišķu tvertni tikai banāniem.
const bananasContainer = new RadioactiveContainer();

Tas ir viss, draugi!