TypeScript-unie- en snijpunttypen

TypeScript biedt krachtige functies voor typesystemen die u helpen veiligere en meer voorspelbare code te schrijven. Tot deze functies behoren union- en intersection-typen, die flexibiliteit bieden bij het definiëren en beheren van complexe typen. Dit artikel introduceert deze concepten en geeft voorbeelden om hun gebruik te illustreren.

Wat zijn vakbondstypen?

Union-typen maken het mogelijk dat een variabele waarden van verschillende typen bevat. Dit is handig wanneer u een waarde moet weergeven die een van meerdere typen kan zijn. Union-typen worden aangeduid met het | (pipe)-symbool.

Unietypen definiëren

Om een ​​union-type te definiëren, geeft u meerdere typen op, gescheiden door het symbool |:

let value: string | number;

value = "Hello, TypeScript"; // Valid
value = 42; // Valid
value = true; // Error: Type 'boolean' is not assignable to type 'string | number'

In dit voorbeeld kan de variabele waarde een tekenreeks of een getal zijn, maar geen booleaans.

Union-typen gebruiken in functies

Unietypen zijn vooral handig in functies waarbij parameters of retourtypen meerdere typen kunnen zijn:

function formatValue(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}

console.log(formatValue("hello")); // Output: HELLO
console.log(formatValue(123.456)); // Output: 123.46

De functie formatValue accepteert een parameter die een string of een number kan zijn en formatteert deze dienovereenkomstig.

Wat zijn snijpunttypen?

Met intersection types kunt u meerdere types combineren tot één. Dit betekent dat een waarde van het intersection type voldoet aan alle types in de intersection. Intersection types worden aangeduid met het & (ampersand) symbool.

Kruispunttypen definiëren

Om een ​​snijpunttype te definiëren, geeft u meerdere typen op, gescheiden door het symbool &:

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type EmployeePerson = Person & Employee;

const john: EmployeePerson = {
  name: "John Doe",
  employeeId: 1234
};

console.log(john.name); // Output: John Doe
console.log(john.employeeId); // Output: 1234

In dit voorbeeld combineert het type EmployeePerson de interfaces Person en Employee, wat resulteert in een type met zowel de eigenschappen name als employeeId.

Het gebruik van snijpunttypen in functies

Snijpunttypen kunnen ook in functies worden gebruikt om meerdere type-eigenschappen te vereisen:

function printEmployeeDetails(employee: Person & Employee): void {
  console.log(`Name: ${employee.name}`);
  console.log(`Employee ID: ${employee.employeeId}`);
}

const jane: EmployeePerson = {
  name: "Jane Smith",
  employeeId: 5678
};

printEmployeeDetails(jane);
// Output:
// Name: Jane Smith
// Employee ID: 5678

De functie printEmployeeDetails vereist een argument dat voldoet aan zowel het type Person als het type Employee.

Combineren van Unie- en Intersectie-typen

U kunt union- en intersection-typen combineren om complexe typedefinities te maken:

type Shape = Circle | Rectangle;

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius * shape.radius;
  } else {
    return shape.width * shape.height;
  }
}

const myCircle: Circle = { kind: "circle", radius: 10 };
const myRectangle: Rectangle = { kind: "rectangle", width: 20, height: 30 };

console.log(getArea(myCircle)); // Output: 314.159...
console.log(getArea(myRectangle)); // Output: 600

In dit voorbeeld is het type Shape een vereniging van Circle en Rectangle, en de functie getArea verwerkt beide typen dienovereenkomstig.

Conclusie

Union- en intersection-typen in TypeScript bieden krachtige manieren om typen te beheren en combineren, en bieden flexibiliteit en precisie in typedefinities. Union-typen maken het mogelijk dat een variabele een van meerdere typen is, terwijl intersection-typen meerdere typen combineren tot één. Door deze functies te gebruiken, kunt u robuustere en typeveilige toepassingen maken.

Oefen met het gebruik van union- en intersection-typen om vertrouwd te raken met hun mogelijkheden en om uw TypeScript-codeervaardigheden te verbeteren.