Kiểu giao cắt trong TypeScript
Bài viết này giải thích về kiểu giao cắt trong TypeScript.
YouTube Video
Kiểu giao cắt trong TypeScript
Trong TypeScript, kiểu giao cắt là cách kết hợp nhiều kiểu để tạo một kiểu mới.
Kiểu giao cắt là gì?
Kiểu giao cắt cho phép bạn kết hợp nhiều kiểu để định nghĩa một kiểu mới với tất cả các thuộc tính của những kiểu đó. Kiểu giao cắt được định nghĩa bằng ký hiệu & và yêu cầu tất cả các thuộc tính từ mỗi kiểu thành phần.
Ví dụ:
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};Trong đoạn mã này, bằng cách định nghĩa type C = A & B, kiểu C trở thành kiểu đối tượng với các thuộc tính name (kiểu chuỗi) và age (kiểu số).
Lợi ích của kiểu giao cắt
Bằng cách sử dụng kiểu giao cắt, bạn có thể tái sử dụng các kiểu hiện có và định nghĩa các kiểu linh hoạt và phức hợp hơn. Điều này nâng cao khả năng bảo trì và mở rộng của mã nguồn của bạn. Ngoài ra, kiểu giao cắt có thể áp dụng các giới hạn của nhiều kiểu khác nhau đồng thời, do đó cải thiện độ an toàn của kiểu.
Lợi ích:
- Khả năng tái sử dụng: Bằng cách kết hợp nhiều kiểu, bạn có thể giảm các định nghĩa dư thừa và tái sử dụng các kiểu hiện có.
- Độ an toàn kiểu: Kiểu giao cắt cải thiện việc kiểm tra kiểu bằng cách chỉ cho phép các đối tượng đáp ứng điều kiện của nhiều kiểu.
Các trường hợp sử dụng của kiểu giao cắt
Kiểu giao cắt cực kỳ hữu ích khi mở rộng đối tượng hoặc giao diện. Đặc biệt, nó hữu ích khi bạn muốn biểu diễn đối tượng với nhiều thuộc tính.
Trường hợp sử dụng 1: Đối tượng với nhiều giao diện
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"
Trong ví dụ này, kiểu Vehicle được định nghĩa như một kiểu giao cắt kết hợp Drivable và Flyable. Một đối tượng thuộc kiểu Vehicle phải triển khai cả hai phương thức drive() và fly().
Trường hợp sử dụng 2: Kết hợp các lớp và kiểu giao cắt
Bằng cách kết hợp các lớp và kiểu giao cắt, có thể tạo ra các đối tượng có các thuộc tính của nhiều giao diện.
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"
Ở đây, chúng tôi sử dụng kiểu giao cắt PersonEmployee của Person và Employee để làm cho lớp CompanyWorker có các thuộc tính của cả hai.
Những điểm cần lưu ý với loại giao nhau
Một điểm quan trọng khi sử dụng loại giao nhau là cần lưu ý đến khả năng xung đột thuộc tính. Nếu các thuộc tính cùng tên có chú thích kiểu khác nhau ở các loại khác nhau, có thể xảy ra lỗi.
Ví dụ cần thận trọng:
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};Trong ví dụ này, các thuộc tính id của A và B xung đột, gây ra lỗi khi định nghĩa một đối tượng với loại C. Trong những trường hợp như vậy, cần xem xét thiết kế để tránh xung đột thuộc tính.
Ví dụ mã với chú thích kiểu cho các loại giao nhau
Cuối cùng, đây là một ví dụ mã thực tế bao gồm các chú thích kiểu.
Ví dụ 1: Hiển thị chi tiết đối tượng
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);Ví dụ 2: Đối tượng với các thuộc tính bổ sung
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}`);Kết luận
Các loại giao nhau của TypeScript là một tính năng mạnh mẽ để kết hợp nhiều loại thành một loại mới. Điều này tăng cường khả năng tái sử dụng và an toàn của mã, cho phép định nghĩa các loại phức tạp. Bằng cách tận dụng tốt tính linh hoạt của thiết kế và cẩn thận với xung đột kiểu, bạn có thể đạt được mã mạnh mẽ và dễ đọc.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.