Generiske lægemidler i TypeScript

Generics kan bruges i forbindelse med funktioner (oprettelse af generiske funktioner), klasser (oprettelse af generiske klasser) og grænseflader (oprettelse af generiske grænseflader).

Grundlæggende brug

Du har sikkert brugt generics tidligere uden at vide det - den mest almindelige brug af generics er at erklære et array:

const myArray: string[];

Det er ikke så specielt ved første øjekast, vi erklærer bare myArray som et array af strenge, men det er det samme som en generisk erklæring:

const myArray: Array;

At holde tingene eksplicitte

Lad os starte med et meget simpelt eksempel - hvordan kan vi overføre denne vanilje-JS-funktion til TypeScript:

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

Denne funktion returnerer et array fyldt med den givne mængde Fyldstofså længde vil være nummer og hele funktionen vil returnere et array af Fyldstof - Men hvad er fyldstof? På dette tidspunkt kan det være hvad som helst, så en mulighed er at bruge nogen:

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

Brug af nogen er bestemt generisk - vi kan sende bogstaveligt talt hvad som helst, så "arbejde med et antal typer i stedet for en enkelt type" fra definitionen er fuldt ud dækket, men vi mister forbindelsen mellem Fyldstof typen og returtypen. I dette tilfælde ønsker vi at returnere en fælles ting, og vi kan eksplicit definere denne fælles ting som type parameter:

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

og bruge det sådan her:

const prefilledArray = getPrefiledArray(0, 10);

Generiske begrænsninger

Lad os se på andre og nok mere almindelige tilfælde. Hvorfor bruger vi egentlig typer i funktioner? For mig er det for at sikre, at de argumenter, der sendes til funktionen, har nogle egenskaber, som jeg ønsker at interagere med.

Lad os endnu en gang prøve at overføre en simpel vanilje-JS-funktion til TS.

funktion getLength(ting) {
    return thing.length;
}

Vi har en ikke-triviel gåde - hvordan sikrer vi, at tingen har en længde ejendom, og den første tanke er måske at gøre noget lignende:

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

og afhængigt af konteksten kan det være korrekt, generelt er vi lidt generiske - det fungerer med arrays af flere typer, men hvad nu hvis vi ikke rigtig ved, om tingen altid skal være en array - måske er tingen en fodboldbane eller en bananskræl? I så fald er vi nødt til at samle de fælles egenskaber for den ting i en konstruktion, der kan definere egenskaber for et objekt - et interface:

interface IThingWithLength {
  længde: antal;
}

Vi kan bruge ITingWithLength interface som type af ting parameter:

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

I dette enkle eksempel er det helt fint, men hvis vi ønsker at holde denne type generisk og ikke stå over for problemet fra det første eksempel, kan vi bruge Generiske begrænsninger:

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

og bruge det:

interface IBananaPeel {
  tykkelse: number;
  længde: nummer;
}

const bananaPeel: IBananaPeel = {tykkelse: 0,2, længde: 3,14};
getLength(bananaPeel);

Brug af strækker sig sikrer, at T vil indeholde egenskaber, der er defineret af ITingWithLength.

Generiske klasser

Indtil nu har vi arbejdet med generiske funktioner, men det er ikke det eneste sted, hvor generiske funktioner brillerer, så lad os se, hvordan vi kan indarbejde dem i klasser.

Lad os først prøve at opbevare en masse bananer i banankurven:

klasse Banan {
  konstruktør(
    offentlig længde: tal,
    offentlig farve: streng,
    offentlig ioniserende stråling: tal
  ) {}
}

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

Lad os nu prøve at skabe en generel kurv til forskellige ting med samme type:

klasse Kurv {
  private ting: T[] = [];

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

const bananaBasket = new Basket();

Og lad os til sidst antage, at vores kurv er en beholder til radioaktivt materiale, og at vi kun kan opbevare materiale, der har ioniserende stråling ejendom:

interface IRadioactive {
  ionizingRadiation: number;
}

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

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

Generisk grænseflade

Lad os til sidst prøve at samle al vores viden og bygge et radioaktivt imperium, der også bruger generiske interfaces:

// Definer fælles attributter for containere
interface IRadioactive {
  ionizingRadiation: number;
}


// Definer noget, der er radioaktivt
interface IBanana extends IRadioactive {
  length: number;
  farve: streng;
}

// Definer noget, der ikke er radioaktivt
interface IDog {
  vægt: nummer;
}

// Definer grænseflade for beholder, der kun kan indeholde radioaktive ting
interface IRadioactiveContainer {
  add(thing: T): void;
  getRadioactiveness():number;
}

// Definer klasse, der implementerer interface for radioaktiv beholder
class RadioactiveContainer implementerer IRadioactiveContainer {
  private stuff: T[] = [];

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

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

// FEJL! Typen 'IDog' opfylder ikke betingelsen 'IRadioactive'
// Og det er ret brutalt at opbevare hunde i en radioaktiv container
const dogsContainer = new RadioactiveContainer();

// Alt er godt fam!
const radioactiveContainer = new RadioactiveContainer();

// Husk at sortere dit radioaktive affald - lav en separat beholder kun til bananer
const bananasContainer = new RadioactiveContainer();

Det var alt, folkens!