Typy Unii i Przecięć w TypeScript
TypeScript zapewnia potężne funkcje systemu typów, które pomagają pisać bezpieczniejszy i bardziej przewidywalny kod. Wśród tych funkcji znajdują się typy union i intersection, które oferują elastyczność w definiowaniu i zarządzaniu złożonymi typami. Niniejszy artykuł wprowadza te koncepcje i zawiera przykłady ilustrujące ich użycie.
Czym są typy związków zawodowych?
Typy union pozwalają zmiennej przechowywać wartości różnych typów. Jest to przydatne, gdy trzeba przedstawić wartość, która może być jednym z kilku typów. Typy union są oznaczane za pomocą symbolu |
(pipe).
Definiowanie typów unii
Aby zdefiniować typ unii, należy określić wiele typów oddzielonych symbolem |
:
let value: string | number;
value = "Hello, TypeScript"; // Valid
value = 42; // Valid
value = true; // Error: Type 'boolean' is not assignable to type 'string | number'
W tym przykładzie zmienna wartość
może być albo ciągiem znaków
, albo liczbą
, ale nie wartością logiczną
.
Używanie typów unii w funkcjach
Typy unii są szczególnie przydatne w funkcjach, w których parametry lub typy zwracane mogą być wieloma typami:
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
Funkcja formatValue
przyjmuje parametr, który może być ciągiem znaków lub liczbą
i formatuje go odpowiednio.
Jakie są typy skrzyżowań?
Typy przecięć pozwalają na łączenie wielu typów w jeden. Oznacza to, że wartość typu przecięcia spełni wszystkie typy w przecięciu. Typy przecięć są oznaczane za pomocą symbolu &
(ampersand).
Definiowanie typów przecięć
Aby zdefiniować typ skrzyżowania, należy określić wiele typów oddzielonych symbolem i
:
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
W tym przykładzie typ EmployeePerson
łączy interfejsy Person
i Employee
, co skutkuje typem, który ma zarówno właściwości name
, jak i employeeId
.
Korzystanie z typów przecięć w funkcjach
Typy przecięć można również stosować w funkcjach wymagających wielu właściwości typu:
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
Funkcja printEmployeeDetails
wymaga argumentu spełniającego oba typy: Person
i Employee
.
Łączenie typów unii i przecięć
Można łączyć typy unii i przecięć, aby tworzyć złożone definicje typów:
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
W tym przykładzie typ Shape
jest unią typów Circle
i Rectangle
, a funkcja getArea
obsługuje oba typy odpowiednio.
Wniosek
Typy union i intersection w TypeScript zapewniają potężne sposoby zarządzania i łączenia typów, oferując elastyczność i precyzję w definicjach typów. Typy union pozwalają zmiennej być jednym z kilku typów, podczas gdy typy intersection łączą wiele typów w jeden. Korzystając z tych funkcji, możesz tworzyć bardziej niezawodne i bezpieczne pod względem typu aplikacje.
Ćwicz używanie typów union i intersection, aby zapoznać się z ich możliwościami i poprawić swoje umiejętności kodowania w języku TypeScript.