TypeScript Generics met voorbeelden

TypeScript generics zijn een krachtige functie waarmee u herbruikbare en type-safe componenten kunt maken. Generics bieden een manier om klassen, functies en interfaces te maken die met verschillende typen werken en tegelijkertijd een sterke type-safety behouden. Dit artikel introduceert generics en laat zien hoe u ze kunt gebruiken met praktische voorbeelden.

Generieke geneesmiddelen begrijpen

Met generieke typen kunt u een component definiëren met een tijdelijke aanduiding voor het type waarop het werkt. In plaats van een concreet type te specificeren, gebruikt u een generieke typeparameter die kan worden vervangen door elk type wanneer het component wordt gebruikt.

Basis syntaxis

De basissyntaxis voor het definiëren van een generiek type is het gebruik van hoekige haakjes <> met een typeparameternaam. Hier is een eenvoudig voorbeeld:

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

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

In dit voorbeeld is identity een generieke functie die een parameter value van het type T neemt en een waarde van hetzelfde type retourneert. De typeparameter T wordt vervangen door het werkelijke type wanneer de functie wordt aangeroepen.

Generieke met klassen

Generics kunnen ook worden gebruikt met klassen om flexibele en herbruikbare datastructuren te creëren. Hier is een voorbeeld van een generieke 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

In dit voorbeeld is de klasse Box gedefinieerd met een generieke typeparameter T. De klasse heeft een private property value van het type T en een methode getValue die de waarde van het type T retourneert.

Generieke met interfaces

Generics kunnen worden gebruikt met interfaces om flexibele en type-safe interfaces te creëren. Hier is een voorbeeld:

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

In dit voorbeeld is de interface Pair gedefinieerd met twee generieke typeparameters T en U. De interface vertegenwoordigt een paar waarden met respectievelijk de typen T en U.

Generieke functies in functies

Generics kunnen worden gebruikt in functies om meerdere typen te verwerken terwijl type safety behouden blijft. Hier is een voorbeeld van een generieke functie die werkt met arrays:

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]

In dit voorbeeld neemt de functie reverseArray een array van het type T en retourneert een omgekeerde array van hetzelfde type. De typeparameter T zorgt ervoor dat de functie werkt met arrays van elk type, terwijl typesafety behouden blijft.

Beperkingen op generieke geneesmiddelen

Soms moet u beperkingen opleggen aan de generieke typeparameter om ervoor te zorgen dat deze bepaalde eigenschappen heeft. Dit doet u met behulp van beperkingen:

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

In dit voorbeeld is de functie logLength beperkt tot typen met een length-eigenschap. Hierdoor kan de functie strings en arrays accepteren, maar geen getallen of andere typen zonder een length-eigenschap.

Conclusie

Generics in TypeScript bieden een krachtige manier om flexibele en herbruikbare componenten te maken en tegelijkertijd sterke typesafety te behouden. Door generics te begrijpen en te gebruiken, kunt u meer generieke en aanpasbare code schrijven, wat de algehele kwaliteit en onderhoudbaarheid van uw TypeScript-toepassingen verbetert.

Experimenteer met generieke typen in uw projecten om de voordelen ervan in de praktijk te zien en uw TypeScript-programmeervaardigheden te verbeteren.