TypeScript Generics med eksempler

Generiske TypeScript er en kraftig funksjon som lar deg lage gjenbrukbare og typesikre komponenter. Generikk gir en måte å lage klasser, funksjoner og grensesnitt som fungerer med en rekke typer, samtidig som sterk typesikkerhet opprettholdes. Denne artikkelen vil introdusere deg til generiske medisiner og demonstrere hvordan du bruker dem med praktiske eksempler.

Forstå generikk

Generisk lar deg definere en komponent med en plassholder for typen den opererer på. I stedet for å spesifisere en konkret type, bruker du en generisk typeparameter som kan erstattes med hvilken som helst type når komponenten brukes.

Grunnleggende syntaks

Den grunnleggende syntaksen for å definere en generisk type er å bruke vinkelparenteser <> med et typeparameternavn. Her er et enkelt eksempel:

function identity(value: T): T {
  return value;
}

const stringIdentity = identity("Hello"); // string
const numberIdentity = identity(123); // number

I dette eksemplet er identitet en generisk funksjon som tar en parameter verdi av typen T og returnerer en verdi av samme type. Typeparameteren T erstattes med den faktiske typen når funksjonen kalles opp.

Generiske med klasser

Generikk kan også brukes med klasser for å lage fleksible og gjenbrukbare datastrukturer. Her er et eksempel på en generisk klasse:

class Box {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const stringBox = new Box("TypeScript");
console.log(stringBox.getValue()); // Output: TypeScript

const numberBox = new Box(42);
console.log(numberBox.getValue()); // Output: 42

I dette eksemplet er Box-klassen definert med en generisk typeparameter T. Klassen har en privat egenskap verdi av typen T og en metode getValue som returnerer verdien av typen T.

Generiske med grensesnitt

Generikk kan brukes med grensesnitt for å lage fleksible og typesikre grensesnitt. Her er et eksempel:

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<string, number> = {
  first: "Age",
  second: 30
};

console.log(pair.first); // Output: Age
console.log(pair.second); // Output: 30

I dette eksemplet er Pair-grensesnittet definert med to generiske typeparametere T og U. Grensesnittet representerer et par verdier med typene T og U, henholdsvis.

Generikk i funksjoner

Generikk kan brukes i funksjoner for å håndtere flere typer samtidig som typesikkerhet opprettholdes. Her er et eksempel på en generisk funksjon som fungerer med matriser:

function reverseArray(items: T[]): T[] {
  return items.reverse();
}

const reversedStringArray = reverseArray(["one", "two", "three"]);
console.log(reversedStringArray); // Output: ["three", "two", "one"]

const reversedNumberArray = reverseArray([1, 2, 3]);
console.log(reversedNumberArray); // Output: [3, 2, 1]

I dette eksemplet tar funksjonen reverseArray en matrise av typen T og returnerer en reversert matrise av samme type. Typeparameteren T sikrer at funksjonen fungerer med arrays av enhver type samtidig som typesikkerheten opprettholdes.

Begrensninger på generiske midler

Noen ganger må du kanskje legge begrensninger på den generiske typeparameteren for å sikre at den har visse egenskaper. Dette gjøres ved å bruke begrensninger:

function logLength(item: T): void {
  console.log(item.length);
}

logLength("Hello, TypeScript"); // Output: 16
logLength([1, 2, 3]); // Output: 3
// logLength(123); // Error: number does not have a length property

I dette eksemplet er logLength-funksjonen begrenset til typer som har en length-egenskap. Dette lar funksjonen godta strenger og matriser, men ikke tall eller andre typer uten en length egenskap.

Konklusjon

Generikk i TypeScript gir en kraftig måte å lage fleksible og gjenbrukbare komponenter på, samtidig som en sterk typesikkerhet opprettholdes. Ved å forstå og bruke generikk kan du skrive mer generisk og tilpasningsdyktig kode, og forbedre den generelle kvaliteten og vedlikeholdsevnen til TypeScript-applikasjonene dine.

Eksperimenter med generikk i prosjektene dine for å se fordelene deres i aksjon og forbedre dine TypeScript-programmeringsferdigheter.