למד סוגי נתונים מסוג TypeScript - מאפס לגיבור

כל הזעם בימינו בעולם פיתוח אתרים - TypeScript. הייתי מתערב עד עכשיו ששמעת על זה, אפילו תוך כדי מעבר. אבל, אם לא עשית זאת או אם אתה סתם סקרן אז הגעת למקום הנכון חבר שלי!

כרגע אני לומד TypeScript בשיתוף עם Angular (מאמר בנושא נמצא בעבודה, אז הישאר מכוון!) כי זה מה שאפליקציית האינטרנט שלנו מובנית בעבודה. החלטתי לכתוב משהו קל ופשוט לביצוע כדי שתוכל להתחיל לעבוד עם סוגי נתונים מסוג TypeScript.

אפרק מאמר זה לשני פוסטים לשם פשטות - הראשון יהיה סקירה קצרה של מה זה TypeScript, סוגי הנתונים וכמה דוגמאות תומכות. המאמר השני יתמקד בהתקנת TypeScript ובהפעלה מקומית במחשב שלך.

מה זה?

לפני שנתחיל, הנה תיאור סופר מרוכז של TypeScript במילים שלי. זוהי קבוצת-על של JavaScript - שמשמעותה בעצם היא סוג של JavaScript שנותן לך יתרונות מסוימים יחד עם כל הגדולות הכלולות ב- JavaScript 'וניל'. זו שפת קוד פתוח שנכתבה ומתוחזקת על ידי מיקרוסופט.

TypeScript מעביר ל- JavaScript ויפעל בכל סביבה שמריץ JavaScript מקורי. אתה יכול להשתמש ב- TypeScript גם עבור יישומי ממשק קצה וגם אחורי.

זה כתוב בדיוק כמו JavaScript, עם כמה יוצאים מהכלל שעליו נעבור בקרוב. הנה דוגמה לכמה TypeScript:

נסו לא להתמקד בכל המעי הגס ובדברים הנוספים שתראו לעיל, נתעמק בזה בהמשך. במקום זאת, התמקדו בדברים הבולטים - אנחנו פשוט מכריזים על משתנים עם ערכים, אלה מחרוזות, מערכים ואובייקטים ממש כמו ב- JavaScript.

דבר נהדר נוסף שלמדתי על TypeScript הוא שאתה יכול לערבב JavaScript עם הקוד ולא תהיה לך שום בעיה לעשות זאת. בדוק את צילום המסך למטה (זה נמצא בתוך אפליקציה Angular):

סוגי מידע

בוא נתחיל עם הדברים המהנים - סוגי נתונים! (ישנם כמה סוגי נתונים שלא נסקור - אף פעם, אפס, לא מוגדר. זה פשוט כי אין בהם הרבה. אני רוצה שתדע שהם קיימים ואם תרצה לחפור יותר על אלה , הנה קישור לתיעוד הרשמי של TypeScript לעיונך.)

TypeScript יסיק את סוג הנתונים שהוקצה למשתנה מבלי שתגדיר את הסוג במפורש, אך לפשטות ולמידה טובה אני רוצה להכריז על סוג הנתונים בעת הכרזת המשתנים שלי.

אנו מקצים סוגי נתונים פשוט על ידי הצבת נקודתיים אחרי שם המשתנה אך לפני סימן השווה:

const {משתנה שם}: {משתנה סוג} = {ערך משתנה }

זוהי המוסכמה שרוב סוגי הנתונים מסוג TypeScript מוכרזים למעט פונקציות ואובייקטים.

כמה סוגי נתונים מגיעים עם מורכבות קצת יותר מזו, אבל אתה מקבל את הרעיון הכללי. להלן כמה הסברים קצרים על סוגי נתונים ודוגמאות כיצד להכריז עליהם.

בוליאני

בוליאנים ב- TypeScript עובדים באותו אופן כמו ב- JavaScript. משתנים מסוג בוליאני מוגדרים כך:

const myBool: boolean = false;

חוּט

מחרוזות ב- TypeScript פועלות באותו אופן כמו ב- JavaScript. משתנים של מחרוזת סוג הנתונים מוכרזים כך:

let myString: string = 'bacon'

מספר

מספרים ב- TypeScript פועלים באותה צורה כמו ב- JavaScript. משתנים של מספר סוג הנתונים מוכרזים כך:

const myNum: number = 1207;

מַעֲרָך

מערכים ב- TypeScript הם, כמו סוגי נתונים אחרים, בדיוק כמו מערכים ב- JavaScript. משתנים של מערך סוגי הנתונים מוכרזים בשתי דרכים נפרדות:

const myArr: number[] = [12, 90, 71];

הדרך הנ"ל היא כיצד תכריז על מערך אם כל האלמנטים בתוך אותו מערך הם מספרים.

const myArr: Array = [12, 90, 71];

דרך זו להכריז על מערך משתמשת בסוג המערך הגנרי המוגדר למספר. מבחינה פונקציונלית, אין הבדל באופן שבו דרכים אלה מייצרות את התוצאה הסופית של הכרזת משתנה עם סוג מערך.

אם סוגי הנתונים בתוך המערך אינם ידועים או שילוב של סוגי נתונים, ניתן להכריז על המערך באמצעות ה- סוג (זה סוג לבד שעליו נדון להלן):

const myArr: Array = [12, 'thirteen', false];

דרך זו תאפשר לך לערבב סוגי נתונים במערך.

צינורות

טופלס הם סוג נתונים ייחודי ל- TypeScript. תחשוב עליהם כעל מערכים עם מספר קבוע של אלמנטים. מומלץ להשתמש בסוג נתונים זה כאשר אתה יודע בדיוק כמה משתנים צריכים להיות לך. ניתן להקצות מחדש את ערך המדדים אך לא את כמות האלמנטים בטופלה.

משתנים מסוג tuple מסוג נתונים מוכרזים בדיוק כמו מערך:

let mine: [number, string];

אם ברצוננו לשנות את ערכי האלמנטים, אנו יכולים לעשות זאת כל עוד הם תואמים את הסוגים שסיפקנו בעת הכרזת המשתנה שלנו:

mine[0] = 14  ✔️

mine[0] = 'Steve'

מכיוון שהגדרנו mineככפול, סדר הערכים חשוב גם כן ולא ניתן לשנותו, הקצאת אינדקס מחוץ למספר שהוגדר במקור תייצר שגיאה:

mine[0] = ['Dave', 71]  ❌

mine = [121, 'Dave', 'Steve'];

mine = [121, 'bacon'];  ✔️

פוּנקצִיָה

פונקציות יכולות להיות מפורשות כפי שאתה רוצה שיהיו. מה שאני מתכוון בכך הוא שנוכל להחיל טיפוסים על הפרמטרים ועל הערכים המוחזרים. להלן שתי דוגמאות:

פונקציה זו תטיל שגיאה אם מוחזר ערך כלשהו שאינו מספר. הוא עשוי להחזיר משתנה רק אם משתנה זה מצביע על מספר.

למעלה, אנו בודקים את הפרמטרים המועברים לפונקציה שלנו. זו דרך נהדרת להימנע מטעויות מכיוון שאם מספר הפרמטרים אינו פעיל או אם סוג הנתונים שלהם אינו תואם את מה שאנו מצפים ש- TypeScript יידע אותנו בשגיאה.

אם אני רוצה פונקציה שלא אמורה להחזיר ערך, אני יכול להגדיר את הסוג כבטל (סוג נתונים שמשמעותו היעדר נתונים. למרות שאפשר להשתמש בו בעת הצהרת משתנים זה בדרך כלל לא בגלל שהיה לנו כדי להגדיר את המשתנה לאפס או לא מוגדר , השתמשתי רק כאשר לפונקציות אין ערך החזרה) ואם הפונקציה מחזירה משהו TypeScript יזרוק שגיאה:

על ידי הגדרת הסוג לבטל, אני מובהק לגבי ההחזרות שלי וקובע כי אמנם פונקציה זו עשויה עדיין לפעול, אך היא לא אמורה להחזיר ערך. אם הוא אכן מחזיר ערך, אקבל שגיאה.

Enum

Enums הם תוספת מבורכת (לעניות דעתי) לסוגי הנתונים. תחשוב עליהם כעל גישה ידידותית יותר למתן שמות לערכים מספריים. הנה דוגמה לאנומה:

enum Foods {'bacon', 'tomato', 'lettuce'};

console.log (מזון [0]) // מניב 'בייקון' console.log (Foods.bacon) // מניב 0 console.log (מזונות ['חסה']) // תשואות 2

אפשר גם להקצות את פורמט אינדקס המספור גם ל- enums. בשפות רבות כולל C # יש enums ואני שמח לראות אותם מגיעים ל- JavaScript.

אתה יכול להיות יצירתי ככל שתרצה עם השמות. אתה יכול אפילו לשנות את הייצוג המספרי של המדדים. אם אתה רוצה שהאינדקס הראשון שלך יתחיל בגיל 18 במקום 0, זה פשוט כמו:

enum Foods {'bacon'= 18, 'tomato', 'lettuce'};

console.log(Foods['bacon']); // 18

בואו נגיד שהיה לנו הערך 18 אך לא היינו בטוחים למה הוא מיפה Foodsבאנומנו, אנו יכולים לבדוק זאת גם:

console.log(Foods[18]); // 'bacon'

מידע אחד ראוי לציון הוא שכעת הגדרנו את האינדקס הראשון שיתחיל בגיל 18, האינדקס הבא יהיה 19, וכן הלאה בעקבות אמנת המספור שתקבע.

לְהִתְנַגֵד

אובייקטים ב- TypeScript מוגדרים בדרכים דומות להגדרת אובייקטים ב- JavaScript. אנו יכולים להיות מרומזים או מפורשים בהגדרתנו כפי שנרצה או כפי שהמצב מכתיב:

let data: = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']};  ✔️

let data: {name: string, age: number, hobbies: string[]} = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']};  ✔️

בעת יצירת אובייקטים, שמות המאפיינים אינם ניתנים לשינוי, אך סדר הופעתם אינו משנה, גם אם אנו מגדירים אותם בסדר ספציפי.

כמו כן, יכולים להיות לנו אובייקטים פשוטים כמו אלה שלמעלה, או שאנחנו יכולים להגדיר אובייקטים מורכבים המנצלים מספר סוגי נתונים כמו זה שלמטה (אובייקט זה נועד למטרות הדגמה בלבד):

הקלד כינוי / ממשק

עם הדוגמה של אובייקט מורכב למעלה, אולי אתה חושב שזה מדהים אבל מה יקרה בפעם הבאה שאצטרך ליצור אובייקט מורכב? אני צריך להקליד את כל זה שוב באופן ידני?

אל תפחד, סוג הכינוי וסוגי הממשק כאן כדי לעזור! כינוי מסוג הוא סוג נתונים המאפשר לנו לשמור בתוכו סוגי נתונים אחרים ואז להפנות למשתנה במקום לשכתב קוד שוב ושוב.

כהערה צדדית, כינויים וממשקי סוג עובדים בדרכים דומות מאוד. שניהם מאפשרים לנו לפיגום אובייקט / שרטוט לאופן בו יש לבנות את הנתונים שלנו. עם זאת, ישנם הבדלים עדינים שלא נסקור כאן. במקום זאת, הנה פוסט שמסביר את ההבדלים בצורה יעילה ביותר אם ברצונך להעמיק.

יש פרטים בין השניים שאנחנו צריכים להיות מודעים להם - כאשר משתמשים בכינוי הסוג, אנו משתמשים בסימן שווה (=) כדי להכריז על ערכים, הממשק אינו דורש סימן שווה.

כעת, לאחר שהכריזנו על הכינוי שלנו, הגיע הזמן להשתמש בכינוי זה. כשאנחנו רוצים "לבנות" את המשתנה החדש שלנו מהכינוי הזה, אנחנו פשוט מגדירים אותו כסוג הנתונים:

חשוב לציין כי הממשק ספציפי ל- TypeScript. הוא משמש רק בזמן הידור כדי לבצע בדיקת סוגים ולתפוס כל שגיאה שעלולה לחלוף מעבר לעין הפקוחה שלנו.  הנתונים מהממשק שלנו יסתיימו בקוד הסופי שלנו, אך הממשק עצמו מורכב .

שיעורים

השיעורים הם, בחלקם, ה"לחם והחמאה "האמיתי של TypeScript (לפחות לעניות דעתי). בהישאר עם הרעיון הזה של פיגום אובייקטים חדשים, שיעורים מאפשרים לנו לבנות נתונים בצורה הרבה יותר קלה מאשר רק להקליד אותם ידנית בכל פעם שמתעורר צורך.

ניתן לחשוב על כיתות כשרטוטים כיצד להגדיר את הנתונים שלנו ואילו פעולות, אם בכלל, עליהן להיות מסוגלות באמצעות שיטות.

להלן דוגמה למחלקה ב- TypeScript (המתאפשרת על ידי הצגת כיתות ב- ES6):

עכשיו, אתם בטח שואלים את עצמכם מה הם ההבדלים בין מעמד , A כינוי סוג , וכן ממשק ? שאלה נהדרת! ההבדל העיקרי בין הוא שניתן לייצר מחלקות (אנו יכולים ליצור מקרים חדשים שלהן) אך ממשק אינו יכול.

ישנם, כמובן, הבדלים אחרים, אך הם אינם כלולים בתחום המאמר. אם תרצה להעמיק, הנה מאמר נהדר שקראתי שיעזור לי להבין את ההבדלים האלה. תמצא מקרי שימוש עבור כולם, כמוני, בעת שימוש ב- TypeScript.

הִתאַחֲדוּת

זהו, רחוק מאוד, סוג הנתונים החביב עלי ביותר של TypeScript! סוג האיחוד מאפשר לנו להכריז על משתנה ואז להגדיר אותו לערך "או או". כוונתי לזה היא נניח שאנו מצפים שיעבירו נתונים לפונקציה אך איננו בטוחים אם מדובר במחרוזת או מספר - זו המטרה המושלמת (והמיועדת) לסוג האיחוד.

אנו משתמשים בתו הצינור היחיד (ב- Windows זה Shift + המקש ממש מעל Enter) בעת הגדרת הסוג. כך זה ייראה בעת הגדרת משתנה עם סוג נתונים של איחוד:

const numOfDoors: string | string[ ];

זה אומר ל- TypeScript כי numOfDoors הוא משתנה שיכול להכיל מחרוזת או מערך מחרוזות.

הנה דוגמה לאותה פונקציה שהזכרתי קודם תוך שימוש בסוג האיחוד:

כל

כל אחד הוא הסוג שקבענו בכל פעם שאנו לא בטוחים לגבי סוגי הנתונים שנקבל. אולי אנחנו מקבלים משהו מצד שלישי או כמה נתונים דינמיים ואנחנו לא בטוחים ב 100% אם אנחנו מקבלים מחרוזת, מספר או אולי מגוון מידע. זהו מקרה השימוש המושלם לסוג כלשהו .

אני אזהיר מפני שימוש בסוג כלשהו, אלא אם כן אתה חייב בהחלט מכיוון שבשימוש אנו בוחרים באחת מתכונות הליבה של בדיקת סוג TypeScript.

עם זאת, לסוג נתונים זה יש מקרי שימוש בדיוק כמו כל סוגי הנתונים שהוזכרו.

סיימנו!

אמרתי לך שזה לא ייקח יותר מדי זמן: ד

אני מקווה שנהנית ממאמר זה על TypeScript ונחשבת לדרך כיצד הוא יכול להועיל לבסיס הקוד שלך. במאמר הבא, נעסוק בצד המעשי של TypeScript. נעבור על התקנתו, קומפילציה ושימוש בפרויקט שלך (גם לא רק פרויקטים של Angular)!

זה פורסם במקור בבלוג שלי.

בזמן שאתה שם אל תשכח להירשם לניוזלטר שלי - אתה יכול לעשות זאת בפינה השמאלית העליונה של הדף. אני מבטיח שלעולם לא דואר זבל לתיבת הדואר הנכנס שלך והמידע שלך לא ישותף עם אף אחד / אתר. אני רוצה מדי פעם לשלוח משאבים מעניינים שאני מוצא, מאמרים על פיתוח אתרים ורשימת הפוסטים החדשים ביותר שלי.

אם טרם עשית זאת, תוכל גם להתחבר אליי ברשתות החברתיות! כל הקישורים שלי נמצאים גם בפינה השמאלית העליונה של דף זה. אני אוהבת להתחבר עם אחרים ולפגוש אנשים חדשים אז אל תפחד להגיד היי :)

שיהיה לך חבר יום מדהים וקידוד שמח!