Typy przecięć w TypeScript

Ten artykuł wyjaśnia typy przecięć w TypeScript.

YouTube Video

Typy przecięć w TypeScript

W TypeScript typy przecięć są sposobem na połączenie wielu typów w celu stworzenia nowego typu.

Czym są typy przecięć?

Typy przecięć pozwalają łączyć wiele typów, aby zdefiniować nowy typ zawierający wszystkie właściwości tych typów. Typy przecięć są definiowane za pomocą symbolu & i wymagają wszystkich właściwości od każdego składowego typu.

Przykład:

1type A = { name: string };
2type B = { age: number };
3
4type C = A & B;
5
6const person: C = {
7    name: "John Doe",
8    age: 30
9};

W tym kodzie, definiując type C = A & B, typ C staje się typem obiektowym z właściwościami name (typ string) i age (typ number).

Korzyści z typów przecięć

Korzystając z typów przecięć, możesz ponownie używać istniejących typów i definiować bardziej elastyczne i złożone typy. To zwiększa łatwość utrzymania i rozszerzalność twojego kodu. Dodatkowo typy przecięć mogą stosować ograniczenia wielu różnych typów jednocześnie, zwiększając tym samym bezpieczeństwo typowania.

Korzyści:

• Ponowne użycie: Dzięki łączeniu wielu typów możesz zmniejszyć redundantne definicje i ponownie używać istniejących typów.
• Bezpieczeństwo typowania: Typy przecięć zwiększają sprawdzanie typów, umożliwiając tylko obiekty spełniające warunki wielu typów.

Przypadki użycia typów przecięć

Typy przecięć są niezwykle przydatne podczas rozszerzania obiektów lub interfejsów. W szczególności są przydatne, gdy chcesz reprezentować obiekty z wieloma właściwościami.

Przypadek użycia 1: Obiekty z wieloma interfejsami

 1interface Drivable {
 2    drive(): void;
 3}
 4
 5interface Flyable {
 6    fly(): void;
 7}
 8
 9type Vehicle = Drivable & Flyable;
10
11const car: Vehicle = {
12    drive() {
13        console.log("Driving on the road");
14    },
15    fly() {
16        console.log("Flying in the sky");
17    }
18};
19
20car.drive(); // "Driving on the road"
21car.fly();   // "Flying in the sky"

W tym przykładzie typ Vehicle jest zdefiniowany jako typ przecięcia łączący Drivable i Flyable. Obiekt typu Vehicle musi implementować zarówno metodę drive(), jak i fly().

Przypadek użycia 2: Łączenie klas i typów przecięć

Łącząc klasy i typy przecięć, można tworzyć obiekty, które mają właściwości wielu interfejsów.

 1interface Person {
 2    name: string;
 3}
 4
 5interface Employee {
 6    employeeId: number;
 7}
 8
 9type PersonEmployee = Person & Employee;
10
11class CompanyWorker implements PersonEmployee {
12    constructor(public name: string, public employeeId: number) {}
13
14    getDetails() {
15        return `${this.name}, Employee ID: ${this.employeeId}`;
16    }
17}
18
19const worker = new CompanyWorker("Alice", 123);
20console.log(worker.getDetails()); // "Alice, Employee ID: 123"

Tutaj używamy typu przecięcia PersonEmployee, łączącego Person i Employee, aby klasa CompanyWorker miała właściwości obu.

Punkty do rozważenia przy użyciu typów przecięcia

Ważnym punktem przy używaniu typów przecięcia jest świadomość możliwości konfliktów w właściwościach. Jeśli właściwości o tej samej nazwie mają różne adnotacje typów w różnych typach, może wystąpić błąd.

Przykład ostrożności:

1type A = { id: number };
2type B = { id: string };
3
4type C = A & B;
5
6// Error: Type 'number' and 'string' are not compatible
7const obj: C = {
8    id: 1
9};

W tym przykładzie właściwości id w A i B kolidują ze sobą, co powoduje błąd przy definiowaniu obiektu typu C. W takich przypadkach konieczna jest analiza projektowa, aby uniknąć konfliktów właściwości.

Przykład kodu z adnotacjami typów dla typów przecięcia

Na koniec przedstawiamy rzeczywisty przykład kodu z adnotacjami typów.

Przykład 1: Wyświetlanie szczegółów obiektu

 1type ContactInfo = { phone: string; email: string };
 2type Address = { city: string; postalCode: string };
 3
 4type PersonDetails = ContactInfo & Address;
 5
 6const details: PersonDetails = {
 7    phone: "123-4567",
 8    email: "example@mail.com",
 9    city: "New York",
10    postalCode: "10001"
11};
12
13console.log(details);

Przykład 2: Obiekt z dodatkowymi właściwościami

 1interface BasicInfo {
 2    name: string;
 3    age: number;
 4}
 5
 6interface WorkInfo {
 7    company: string;
 8    position: string;
 9}
10
11type FullInfo = BasicInfo & WorkInfo;
12
13const employee: FullInfo = {
14    name: "Bob",
15    age: 28,
16    company: "Tech Corp",
17    position: "Engineer"
18};
19
20console.log(`${employee.name} is a ${employee.position} at ${employee.company}`);

Wnioski

Typy przecięcia w TypeScript to potężna funkcja pozwalająca łączyć wiele typów w nowy typ. To zwiększa możliwość ponownego użycia kodu i jego bezpieczeństwo, umożliwiając zdefiniowanie złożonych typów. Dzięki skutecznemu wykorzystaniu elastyczności projektowania przy jednoczesnej ostrożności wobec konfliktów typów, można uzyskać solidny i bardzo czytelny kod.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video