TypeScript Union og Intersection Types

TypeScript gir kraftige typesystemfunksjoner som hjelper deg å skrive tryggere og mer forutsigbar kode. Blant disse funksjonene er unions- og skjæringstyper, som tilbyr fleksibilitet i å definere og administrere komplekse typer. Denne artikkelen introduserer disse konseptene og gir eksempler for å illustrere bruken av dem.

Hva er unionstyper?

Unionstyper lar en variabel inneholde verdier av forskjellige typer. Dette er nyttig når du skal representere en verdi som kan være én av flere typer. Unionstyper er angitt med | (rør)-symbolet.

Definere foreningstyper

For å definere en foreningstype, spesifiserer du flere typer atskilt med |-symbolet:

let value: string | number;

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

I dette eksemplet kan variabelen verdi enten være en streng eller et tall, men ikke en boolsk.

Bruke unionstyper i funksjoner

Unionstyper er spesielt nyttige i funksjoner der parametere eller returtyper kan være flere typer:

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

Funksjonen formatValue tar en parameter som enten kan være en streng eller et nummer og formaterer den deretter.

Hva er krysstyper?

Krysstyper lar deg kombinere flere typer til én. Dette betyr at en verdi av krysstypen vil tilfredsstille alle typene i krysset. Krysstyper er angitt med & (ampersand)-symbolet.

Definere krysstyper

For å definere en krysstype spesifiserer du flere typer atskilt med &-symbolet:

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

I dette eksemplet kombinerer EmployeePerson-typen grensesnittene Person og Employee, noe som resulterer i en type som har både name og ansatteId egenskaper.

Bruke krysstyper i funksjoner

Krysstyper kan også brukes i funksjoner for å kreve flere typeegenskaper:

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

Funksjonen printEmployeeDetails krever et argument som tilfredsstiller både Person og Employee typene.

Kombinere unions- og veikrysstyper

Du kan kombinere unions- og skjæringstyper for å lage komplekse typedefinisjoner:

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

I dette eksemplet er Shape-typen en forening av Sirkel og Rektangel, og getArea-funksjonen håndterer begge typene tilsvarende.

Konklusjon

Unions- og skjæringstyper i TypeScript gir kraftige måter å administrere og kombinere typer på, og tilbyr fleksibilitet og presisjon i typedefinisjoner. Unionstyper lar en variabel være én av flere typer, mens krysstyper kombinerer flere typer til én. Ved å bruke disse funksjonene kan du lage mer robuste og typesikre applikasjoner.

Øv deg på å bruke unions- og krysstyper for å bli komfortabel med deres evner og forbedre dine TypeScript-kodingsferdigheter.