סוגי צמתים ב-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 (סוג מחרוזת) ו-age (סוג מספר).
יתרונותיהם של סוגי צמתים
באמצעות סוגי צמתים, אתה יכול למחזר סוגים קיימים ולהגדיר סוגים גמישים ומורכבים יותר. דבר זה משפר את התחזוקה ואת המורחבות של הקוד שלך. בנוסף, סוגי צמתים יכולים להחיל אילוצים של מספר סוגים שונים בו זמנית, ובכך לשפר את הבטחת הסוגים.
יתרונות:
- שימוש חוזר: על ידי שילוב של מספר סוגים, ניתן להפחית הגדרות מיותרות ולמחזר סוגים קיימים.
- בטיחות סוגים: סוגי צמתים משפרים את בדיקת הסוגים על ידי הרשאה רק לאובייקטים שעומדים בתנאים של מספר סוגים.
מקרי שימוש לסוגי צמתים
סוגי צמתים מועילים במיוחד בעת הרחבת אובייקטים או ממשקים. במיוחד, זה שימושי כאשר רוצים לייצג אובייקטים עם מספר מאפיינים.
מקרה שימוש 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 בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.