ประเภทการตัดกันใน TypeScript
บทความนี้อธิบายเกี่ยวกับประเภทการตัดกันใน TypeScript
YouTube Video
ประเภทการตัดกันใน TypeScript
ใน TypeScript, ประเภทการตัดกัน เป็นวิธีการรวมประเภทหลาย ๆ ประเภทเข้าด้วยกันเพื่อสร้างประเภทใหม่
ประเภทการตัดกันคืออะไร?
ประเภทการตัดกันช่วยให้คุณสามารถรวมประเภทหลาย ๆ ประเภทเข้าด้วยกันเพื่อกำหนดประเภทใหม่ที่มี คุณสมบัติทั้งหมดของประเภทเหล่านั้น ประเภทการตัดกันถูกกำหนดโดยใช้สัญลักษณ์ & และต้องการคุณสมบัติทั้งหมดจากแต่ละประเภทที่ประกอบขึ้นมา
ตัวอย่าง:
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};ในโค้ดนี้ เมื่อกำหนด type C = A & B, ประเภท C จะกลายเป็นประเภทออบเจกต์ที่มีคุณสมบัติ name (ประเภท string) และ age (ประเภท number)
ข้อดีของประเภทการตัดกัน
ด้วยการใช้ประเภทการตัดกัน คุณสามารถ นำประเภทที่มีอยู่มาใช้ซ้ำ และกำหนดประเภทที่ยืดหยุ่นและซับซ้อนได้มากขึ้น สิ่งนี้ช่วยเพิ่มความสามารถในการดูแลและขยายขีดจำกัดของโค้ดของคุณ นอกจากนี้ ประเภทการตัดกันสามารถ นำข้อจำกัดของประเภทที่แตกต่างหลายประเภทมาใช้พร้อมกัน เพื่อเพิ่มความปลอดภัยของประเภท
ข้อดี:
- การนำกลับมาใช้ได้ใหม่: โดยการรวมประเภทหลายประเภท คุณสามารถลดการกำหนดซ้ำซ้อนและนำประเภทที่มีอยู่มาใช้ซ้ำได้
- ความปลอดภัยของประเภท: ประเภทการตัดกันช่วยเพิ่มการตรวจสอบประเภทโดยอนุญาตเฉพาะออบเจกต์ที่ตรงตามเงื่อนไขของประเภทหลายประเภท
กรณีการใช้งานสำหรับประเภทการตัดกัน
ประเภทการตัดกันมีประโยชน์อย่างมากเมื่อใช้ในการขยายออบเจกต์หรืออินเตอร์เฟซ เป็นพิเศษเมื่อคุณต้องการแสดง ออบเจกต์ที่มีคุณสมบัติหลายอย่าง
กรณีการใช้งาน 1: ออบเจกต์ที่มีอินเตอร์เฟซหลายอย่าง
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"
ในตัวอย่างนี้ ประเภท Vehicle ถูกกำหนดเป็นประเภทการตัดกันที่รวม Drivable และ Flyable ออบเจกต์ที่มีประเภท Vehicle ต้องใช้ทั้งเมธอด drive() และ fly()
กรณีการใช้งาน 2: การรวมคลาสและประเภทการตัดกัน
โดยการรวมคลาสและประเภทการตัดกัน สามารถสร้างออบเจกต์ที่มีคุณสมบัติของอินเตอร์เฟซหลายประเภทได้
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"
ที่นี่ เราใช้ประเภทการตัดกัน PersonEmployee ซึ่งมาจาก Person และ Employee เพื่อทำให้คลาส CompanyWorker มีคุณสมบัติของทั้งสอง
สิ่งที่ต้องพิจารณาเกี่ยวกับประเภทการตัดกัน
จุดสำคัญเมื่อใช้ประเภทการตัดกันคือการตระหนักถึง ความเป็นไปได้ของข้อขัดแย้งในพร็อพเพอร์ตี หากพร็อพเพอร์ตีที่มีชื่อเดียวกันมีการประกาศประเภทต่างกันในแต่ละประเภท อาจเกิดข้อผิดพลาดได้
ตัวอย่างข้อควรระวัง:
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};ในตัวอย่างนี้ พร็อพเพอร์ตี id ของ A และ B ขัดแย้งกัน ทำให้เกิดข้อผิดพลาดเมื่อกำหนดอ็อบเจกต์ประเภท C ในกรณีเช่นนี้ จำเป็นต้องทบทวนการออกแบบเพื่อหลีกเลี่ยงข้อขัดแย้งในพร็อพเพอร์ตี
ตัวอย่างโค้ดพร้อมการประกาศประเภทสำหรับประเภทการตัดกัน
สุดท้ายนี้คือตัวอย่างโค้ดจริงที่แสดงการประกาศประเภท
ตัวอย่าง 1: แสดงรายละเอียดของอ็อบเจกต์
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);ตัวอย่าง 2: อ็อบเจกต์ที่มีพร็อพเพอร์ตีเพิ่มเติม
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}`);สรุป
ประเภทการตัดกันใน TypeScript เป็นฟีเจอร์ที่มีพลังสำหรับการรวมหลายประเภทให้เป็นประเภทใหม่ สิ่งนี้ช่วยเพิ่มการนำโค้ดกลับมาใช้ใหม่และความปลอดภัย รวมถึงช่วยให้สามารถกำหนดประเภทที่ซับซ้อนได้ โดยการใช้ความยืดหยุ่นในการออกแบบอย่างมีประสิทธิภาพในขณะที่ระวังข้อขัดแย้งในประเภท คุณสามารถสร้างโค้ดที่แข็งแกร่งและอ่านได้ง่าย
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย