TypeScript Union och Intersection Types

TypeScript tillhandahåller kraftfulla typsystemfunktioner som hjälper dig att skriva säkrare och mer förutsägbar kod. Bland dessa funktioner finns unions- och korsningstyper, som erbjuder flexibilitet när det gäller att definiera och hantera komplexa typer. Den här artikeln introducerar dessa begrepp och ger exempel för att illustrera deras användning.

Vad är fackföreningstyper?

Unionstyper tillåter en variabel att hålla värden av olika typer. Detta är användbart när du behöver representera ett värde som kan vara en av flera typer. Unionstyper betecknas med | (rör)-symbolen.

Definiera fackliga typer

För att definiera en fackföreningstyp anger du flera typer åtskilda av symbolen |:

let value: string | number;

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

I det här exemplet kan variabeln värde antingen vara en sträng eller ett tal, men inte ett booleskt.

Använda fackliga typer i funktioner

Unionstyper är särskilt användbara i funktioner där parametrar eller returtyper kan vara flera 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

Funktionen formatValue tar en parameter som kan vara antingen en sträng eller ett tal och formaterar den därefter.

Vad är korsningstyper?

Korsningstyper låter dig kombinera flera typer till en. Detta innebär att ett värde av korsningstypen kommer att tillfredsställa alla typer i korsningen. Korsningstyper betecknas med symbolen & (ampersand).

Definiera korsningstyper

För att definiera en korsningstyp anger du flera typer åtskilda av symbolen &:

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 det här exemplet kombinerar typen EmployeePerson gränssnitten Person och Employee, vilket resulterar i en typ som har både name och werknemerId egenskaper.

Använda korsningstyper i funktioner

Skärningstyper kan också användas i funktioner som kräver flera typegenskaper:

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

Funktionen printEmployeeDetails kräver ett argument som uppfyller både Person- och Employee-typerna.

Kombinera fackliga och korsningstyper

Du kan kombinera unions- och skärningstyper för att skapa komplexa typdefinitioner:

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 det här exemplet är Shape-typen en förening av Cirkel och Rektangel, och getArea-funktionen hanterar båda typerna därefter.

Slutsats

Unions- och korsningstyper i TypeScript ger kraftfulla sätt att hantera och kombinera typer, vilket ger flexibilitet och precision i typdefinitioner. Unionstyper tillåter en variabel att vara en av flera typer, medan skärningstyper kombinerar flera typer till en. Genom att använda dessa funktioner kan du skapa mer robusta och typsäkra applikationer.

Öva på att använda unions- och korsningstyper för att bli bekväm med deras kapacitet och förbättra dina TypeScript-kodningsfärdigheter.