Generika i TypeScript

Generics kan användas i samband med funktioner (skapa generisk funktion), klasser (skapa generisk klass) och gränssnitt (skapa generiskt gränssnitt).

Grundläggande användning

Du har förmodligen använt generics tidigare utan att veta om det - den vanligaste användningen av generics är att deklarera en array:

const myArray: sträng[];

Det är inte så speciellt vid första anblicken, vi förklarar bara myArray som en array av strängar, men det är samma sak som en generisk deklaration:

konst myArray: Array;

Att hålla saker och ting tydliga

Låt oss börja med ett mycket enkelt exempel - hur kan vi porta den här vanilj-JS-funktionen till TypeScript:

funktion getPrefiledArray(fyllmedel, längd) {
    return (new Array(length)).fill(filler);
}

Denna funktion returnerar en array fylld med en given mängd fyllnadsmedel, så längd kommer att vara antal och hela funktionen kommer att returnera en array av fyllnadsmedel - men vad är fyllnadsmedel? I det här läget kan det vara vad som helst, så ett alternativ är att använda någon:

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

Använda någon är förvisso generisk - vi kan skicka bokstavligen vad som helst, så "arbeta med ett antal typer istället för en enda typ" från definitionen täcks helt, men vi förlorar kopplingen mellan fyllnadsmedel och returtyp. I det här fallet vill vi returnera en gemensam sak, och vi kan uttryckligen definiera denna gemensamma sak som typ parameter:

function getPrefiledArray(fyllning: T, längd: tal): T[] {
    return (new Array(length)).fill(filler);
}

och använda så här:

const prefilledArray = getPrefiledArray(0, 10);

Generiska begränsningar

Låt oss titta på andra, förmodligen vanligare fall. Varför använder vi egentligen typer i funktioner? För mig är det för att säkerställa att argument som skickas till funktionen har några egenskaper som jag vill interagera med.

Låt oss än en gång försöka porta en enkel vanilj-JS-funktion till TS.

funktion getLength(sak) {
    returnerar thing.length;
}

Vi har en icke-trivial gåta - hur kan vi säkerställa att saken har en längd egendom, och första tanken kan vara att göra något liknande:

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

och beroende på sammanhanget kan det vara korrekt, men överlag är vi lite generiska - det fungerar med matriser av flera typer, men vad händer om vi inte riktigt vet om saken alltid ska vara en matris - kanske är saken en fotbollsplan eller ett bananskal? I det här fallet måste vi samla de gemensamma egenskaperna hos den saken i en konstruktion som kan definiera egenskaper hos ett objekt - ett gränssnitt:

gränssnitt ITingWithLength {
  längd: nummer;
}

Vi kan använda ITingMedLängd gränssnitt som typ av sak parameter:

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

i det här enkla exemplet kommer det att vara helt okej, men om vi vill behålla den här typen generisk och inte möta problemet från det första exemplet kan vi använda Generiska begränsningar:

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

och använda den:

gränssnitt IBananaPeel {
  tjocklek: antal;
  längd: nummer;
}

const bananaPeel: IBananaPeel = {tjocklek: 0,2, längd: 3,14};
getLength(bananaPeel);

Använda förlänger säkerställer att T kommer att innehålla egenskaper som definieras av ITingMedLängd.

Generiska klasser

Fram till nu har vi arbetat med generiska funktioner, men det är inte det enda stället där generiska funktioner är bra, låt oss se hur vi kan införliva dem i klasser.

Först och främst ska vi försöka lagra ett gäng bananer i banankorgen:

klass Banana {
  konstruktör(
    publik längd: tal,
    publik färg: sträng,
    publik joniserande strålning: tal
  ) {}
}

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

Låt oss nu försöka skapa en korg för allmänna ändamål, för olika saker med samma typ:

klass Korg {
  privat stuff: T[] = [];

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

const bananaBasket = new Basket();

Och slutligen, låt oss anta att vår korg är en behållare för radioaktivt material och att vi bara kan förvara material som har joniserande strålning egendom:

gränssnitt IRadioaktiv {
  joniserande strålning: nummer;
}

klass RadioactiveContainer {
  privat stuff: T[] = [];

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

Generiskt gränssnitt

Låt oss slutligen försöka samla all vår kunskap och bygga ett radioaktivt imperium också med hjälp av generiska gränssnitt:

// Definiera gemensamma attribut för behållare
gränssnitt IRadioaktiv {
  joniserande strålning: nummer;
}


// Definiera något som är radioaktivt
gränssnitt IBanana utökar IRadioaktiv {
  längd: nummer;
  färg: sträng;
}

// Definiera något som inte är radioaktivt
gränssnitt IDog {
  vikt: nummer;
}

// Definiera gränssnitt för behållare som bara kan innehålla radioaktiva saker
gränssnitt IRadioactiveContainer {
  add(thing: T): void;
  getRadioactiveness():tal;
}

// Definiera klass som implementerar gränssnittet för radioaktiva behållare
class RadioactiveContainer implementerar IRadioactiveContainer {
  privat stuff: T[] = [];

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

  getRadioactiveness(): tal {
      return this.stuff.reduce((a, b) => a + b.joniserande strålning, 0)
  }
}

// FEL! Typen 'IDog' uppfyller inte begränsningen 'IRadioactive'
// Och det är ganska brutalt att förvara hundar i en radioaktiv behållare
const dogsContainer = new RadioactiveContainer();

// Allt bra fam!
const radioactiveContainer = new RadioactiveContainer();

// Kom ihåg att sortera ditt radioaktiva avfall - skapa en separat behållare endast för bananer
const bananasContainer = new RadioactiveContainer();

Det var allt, gott folk!