שרשור אופציונלי ב-TypeScript
במאמר זה נסביר על שרשור אופציונלי ב-TypeScript.
YouTube Video
שרשור אופציונלי ב-TypeScript
שרשור אופציונלי ב-TypeScript הוא תכונה שימושית לגישה למאפיינים של אובייקטים או מערכים מקוננים מאוד. תכונה זו מונעת שגיאות בעת גישה למאפיינים שאינם קיימים, ומאפשרת לך לכתוב קוד תמציתי וקריא.
מהו שרשור אופציונלי?
המדען של שרשור אופציונלי (?.) מחזיר undefined בעת גישה למאפיין או שיטה של אובייקט שאינו קיים. זה מאפשר לקוד להמשיך לפעול מבלי לזרוק שגיאה אם המאפיין אינו קיים.
לדוגמה, בעת גישה למאפיינים של אובייקט מקונן כמו שמוצג מטה, תתרחש שגיאה אם המאפיין אינו קיים בשיטה הרגילה.
דוגמה
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- במקרה זה, תתרחש שגיאה אם
addressאינו קיים. ניתן להשתמש בשרשור אופציונלי כדי למנוע זאת.
דוגמה לשימוש בשרשור אופציונלי
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- השימוש בשרשור אופציונלי מונע שגיאות ומחזיר
undefinedבמקום כאשר המאפיינים אינם קיימים.
כיצד להשתמש בשרשור אופציונלי
ניתן להשתמש בשרשור אופציונלי במגוון תרחישים, כמו גישה למאפיינים, קריאה לפונקציות וגישה למערכים. נסביר כיצד להשתמש בכל אחד מאלה.
גישה למאפיינים
אתה יכול לגשת בצורה בטוחה למאפיינים מקוננים של אובייקטים.
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
הקוד הזה משתמש בשרשור אופציונלי כדי לגשת לתכונות city ו־country רק אם התכונה location קיימת באובייקט company.
קריאה לפונקציות
שרשור אופציונלי יכול גם לבדוק את קיומה של פונקציה לפני קריאתה.
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
הקוד הזה משתמש בשרשור אופציונלי כדי לקרוא בבטחה לפונקציה greet רק אם היא קיימת. לא נוצרת שגיאה גם אם הפונקציה אינה מוגדרת.
גישה למערכים
ניתן ליישם שרשור אופציונלי על מערכים כדי לבדוק אם פריטים קיימים.
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
הקוד הזה ניגש לאלמנטים במערך רק אם team.members קיימת, ומחזיר ערך לאינדקסים קיימים ו־undefined לאלה שלא קיימים.
שרשור אופציונלי ואופרטור איחוד הערכים הריקים (Nullish Coalescing)
שרשור אופציונלי מחזיר undefined, אך לעיתים זה אינו מספיק. במקרה זה, ניתן להשתמש ב־אופרטור איחוד הערכים הריקים (??), שהוצג ב־TypeScript 3.7, כדי לספק ערכי ברירת מחדל כאשר הערך הוא null או undefined.
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
כאשר משלבים אותו עם שרשור אופציונלי, ניתן לכתוב קוד גמיש יותר.
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
אזהרות בעת השימוש בשרשור אופציונלי
כאשר משתמשים בשרשור אופציונלי, חשוב לזכור את הנקודות הבאות:.
-
שימוש מיותר בשרשור אופציונלי
- שימוש בשרשור אופציונלי בתכונות או מתודות שמובטח שיקיימו עלול להפוך את הקוד למפורש ומסורבל שלא לצורך. עדיף להשתמש בזה רק כאשר קיומו של היעד שאליו ניגשים אינו ודאי.
-
שגיאות הקלדה
- שימוש מופרז בשרשור אופציונלי יכול להקשות על זיהוי שגיאות הקלדה שמובילות לגישה לתכונות לא מכוונות. בצעו בדיקות סוג מתאימות והשתמשו בזה בזהירות.
סיכום קוד
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
סיכום
השרשור האופציונלי ב-TypeScript מספק קוד תמציתי תוך הימנעות משגיאות כאשר ניגשים לעצמים או מערכים מקוננים. בנוסף, שילוב השרשור האופציונלי עם אופרטור איחוד הערכים הריקים מאפשר לקבוע ערכי ברירת מחדל וליצור לוגיקה גמישה יותר. כאשר משתמשים בזה בצורה נכונה, זה יכול לשפר משמעותית את בטיחות וקריאות הקוד.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.