מדריך TypeScript: דע על יסודות ה- TypeScript

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

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

מבוא ל- TypeScript

TypeScript הוא ערכת-על מוקלדת של JavaScript שמתכנסת ל- JavaScript רגיל. TypeScript הוא מונחה עצמים טהור עם מחלקות, ממשקים ושפות תכנות שהוקלדו סטטית כמו C # אוֹ . זה דורש מהדר לאסוף וליצור בקובץ JavaScript. בעיקרון, TypeScript הוא גרסת ה- ES6 של JavaScript עם כמה תכונות נוספות.

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

תחביר:

var message: string = 'ברוך הבא לאדוריקה!' console.log (הודעה)

בעת הידור הוא יוצר את קוד ה- JavaScript הבא:

// נוצר על ידי typescript 1.8.10 var message = 'ברוך הבא לאדוריקה!' console.log (הודעה)

תכונות של TypeScript

• חוצה פלטפורמות: ניתן להתקין את מהדר TypeScript בכל מערכת הפעלה כמו Windows, MacOS ו- Linux.

  
  
  

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

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

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

• מניפולציה של DOM : אתה יכול להשתמש ב- TypeScript כדי לתפעל את ה- DOM להוספה או הסרה של אלמנטים.

• תכונות ES 6 : TypeScript כולל את רוב התכונות של ECMAScript 2015 המתוכנן (ES 6, 7) כגון מחלקה, ממשק, פונקציות חץ וכו '.

יתרונות השימוש ב- TypeScript

• TypeScript הוא מהיר, פשוט, קל ללמוד ופועל בכל דפדפן או מנוע JavaScript.

• זה דוֹמֶה ל JavaScript ומשתמש באותה תחביר וסמנטיקה.

  הכנס php לטבלה $

• זה עוזר למפתחי backend לכתוב חזית קוד מהר יותר .

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

• קובץ ההגדרה, עם סיומת .d.ts, מספק תמיכה בספריות JavaScript קיימות כמו Jquery, D3.js וכו '. אז, קוד TypeScript יכול להוסיף ספריות JavaScript שימוש בהגדרות סוג כדי להיעזר ביתרונות של בדיקת סוגים, השלמת קוד אוטומטית ותיעוד בספריות JavaScript קיימות דינמיות.

• הוא כולל תכונות מ ES6 ו ES7 שיכולים לפעול במנועי JavaScript ברמת ES5 כמו Node.js .

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

טיפוסי TypeScript

מערכת ה- Type מייצגת את סוגי הערכים השונים הנתמכים על ידי השפה. זה בודק את תוֹקֶף של המסופק ערכים לפני שהם מאוחסנים או מטופלים על ידי התוכנית.

ניתן לסווג אותו לשני סוגים כגון:

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

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

מדריך TypeScript: משתנים

משתנה הוא רווח בשם בזיכרון המשמש לאחסון ערכים.

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

ישנן ארבע אפשרויות כאשר אנו מכריזים על משתנה:

var [מזהה]: [הערת-סוג] = ערך

var [מזהה]: [הערת-סוג]

var [מזהה] = ערך

var [זיהוי]

דוגמא:

var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('מזהה עובד' + אמפיד)

בעת הידור, הוא ייצור את קוד JavaScript הבא:

// נוצר על ידי typescript 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('id עובד:' + empid)

תְפוּקָה:

שם: דייזי
מזהה עובד: 1001

עכשיו נעבור לנושא הבא של הדרכת TypeScript שלנו.

מפעילים

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

• מפעילי חשבון
• פעולות לוגיות
• מפעילים יחסיים
• מפעילים סיביות
• מפעילי מטלות

מפעילי חשבון

דוגמא:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('סכום:' + res) res = num1 - num2 console.log ('הבדל:' + res) res = num1 * num2 console.log ('מוצר:' + res)

תְפוּקָה:

סכום: 12
הבדל: 8
מוצר: 20

פעולות לוגיות

דוגמא:

ממוצע var: מספר = 20 var אחוז אחוז: מספר = 90 console.log ('ערך ממוצע:' + ממוצע + ', ערך אחוז:' + אחוז) var res: בוליאני = ((ממוצע> 50) && (אחוז> 80 )) console.log ('(ממוצע> 50) && (אחוז> 80):', res)

תְפוּקָה:

ערך ממוצע: 20, ערך אחוז: 90
(ממוצע> 50) && (אחוז> 80): שקר

מפעילים יחסיים

דוגמא:

var num1: number = 10 var num2: number = 7 console.log ('Value of num1:' + num1) console.log ('Value of num2:' + num2) var res = num1> num2 console.log ('num1 גדול מ- num2: '+ res) res = num1
 תְפוּקָה: 
ערך המספר 1: 10 
 ערך מספר 2: 7 
 מספר 1 גדול יותר מספר 2: נכון 
 מספר 1 פחות מ- מספר 2: שקר
 מפעילים סיבית 
 מפעילים 
 תיאור 
 סיבית AND (&) 
מבצע פעולת AND בוליאנית על כל סיבית בארגומנטים השלמים שלה.
 סיבית או (|) 
הוא מבצע פעולת OR בוליאנית על כל סיבית בארגומנטים השלמים שלה.
 XOR Bitwise (^) 
הוא מבצע פעולת OR בלעדית בלעדית על כל סיבית בארגומנטים השלמים שלה.
 Bitwise לא (~) 
זהו מפעיל לא אחיד ופועל על ידי היפוך כל הסיביות באופראנד.
 משמרת שמאלה (<<) 
הוא מעביר את כל החלקים באופראנד הראשון שלו שמאלה לפי מספר המקומות שצוינו באופראנד השני.
 משמרת ימנית (>>) 
הערך של האופרן השמאלי מועבר ימינה על ידי מספר הביטים שצוין על ידי האופרנד הימני.
 משמרת ימנית עם אפס (>>>) 
זה דומה למפעיל >>, אלא שהסיביות שהועברו משמאל הן תמיד אפס.
 דוגמא: 
var a: number = 2 // מצגת ביט 10 var b: number = 3 // bit bit 11 var result result = (a & b) console.log ('(a & b) =>', result) result = ( a | b) console.log ('(a | b) =>', תוצאה)
 תְפוּקָה: 
(a & b) => 2 
 (א | ב) => 3
 מפעילי מטלות 
 מפעילים 
 תיאור 
 הקצאה פשוטה (=) 
מקצה ערכים מאופרנד צד ימין לאופראנד צד שמאל
 הוספה והקצאה (+ =) 
זה מוסיף את האופרנד הימני לאופרן השמאלי ומקצה את התוצאה לאופרן השמאלי.
 חיסור והקצאה (- =) 
הוא מחסר את האופרן הימני מהאופרן השמאלי ומקצה את התוצאה לאופרן השמאלי.
 הכפל והקצה (* =) 
זה מכפיל את האופרנד הימני עם האופרנד השמאלי ומקצה את התוצאה לאופרן השמאלי.
 לחלק ולהקצות (/ =) 
זה מחלק את האופרנד השמאלי לאופרנד הימני ומקצה את התוצאה לאופרן השמאלי.
 דוגמא: 
var a: number = 12 var b: number = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b console .log ('a- = b:' + a)
 תְפוּקָה: 
a = b: 10 
 a + = b: 20 
 a - = b: 10
אלה היו המפעילים השונים. עכשיו בואו נמשיך בהדרכת TypeScript שלנו ונלמד על לולאות.
 לולאות 
ייתכנו מצבים שבהם צריך לבצע בלוק קוד מספר מספר פעמים. א לוּלָאָה הצהרה מאפשרת לנו לבצע הצהרה או קבוצת הצהרות מספר פעמים.
ניתן לסווג את לולאות TypeScript כ:
 לולאה 
ה לולאה הוא יישום של לולאה מוגדרת.
 תחביר: 
עבור (ביטוי ראשון ביטוי שני ביטוי שלישי) {// הצהרות שיש לבצע שוב ושוב}
כאן, הביטוי הראשון מבוצע לפני תחילת הלולאה. הביטוי השני הוא התנאי לביצוע הלולאה. והביטוי השלישי מבוצע לאחר הביצוע של כל בלוק קוד.
 דוגמא: 
עבור (תן אני = 0 אני<2 i++) { console.log ('Execute block statement' + i) }
 תְפוּקָה: 
ביצוע הצהרת חסום 0 
ביצוע הצהרת חסימה 1
 בעוד לולאה 
לולאת הזמן מבצעת את ההוראות בכל פעם שהמצב שצוין מוערך כנכון.
 תחביר: 
בעוד (ביטוי תנאי) {// בלוק קוד לביצוע}
 דוגמא: 
תן לי: מספר = 1 בזמן (i<3) { console.log( 'Block statement execution no.' + i ) i++ }
 תְפוּקָה: 
חסום ביצוע הצהרה מס '1 
חסום ביצוע הצהרה מס '2
 תעשה..למרות לולאה 
הלולאה do & hellipwhile דומה ללולאת ה- while, אלא שהיא לא מעריכה את התנאי בפעם הראשונה שהלולאה מבצעת.
 תחביר: 
בצע {// חסימת קוד לביצוע} בזמן (ביטוי תנאי)
 דוגמא: 
  
תן לי: number = 1 לעשות {console.log ('חסום ביצוע הצהרת מס'. + i) i ++} תוך כדי (i<3)
 תְפוּקָה: 
חסום ביצוע הצהרה מס '1 
חסום ביצוע הצהרה מס '2
מלבד אלה, יש הצהרות הפסקה והמשך ב- TypeScript המשמשות בלולאה.
 הצהרת הפסקה 
הצהרת ההפסקה משמשת להוצאת השליטה ממבנה. שימוש בהצהרת הפסקה בלולאה מסייע לתוכנית לצאת מהלולאה.
 דוגמא: 
var i: number = 1 while (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop
 תְפוּקָה: 
המכפיל הראשון של 5 בין 1 ל -10 הוא: 5
 המשך הצהרה 
הצהרת המשך מדלגת על ההצהרות הבאות באיטרציה הנוכחית ומחזירה את השליטה לתחילת הלולאה.
 דוגמא: 
var מספר: מספר = 0 ספירת var: מספר = 0 עבור (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)
 תְפוּקָה: 
ספירת הערכים המוזרים בין 0 ל -10 היא: 5
אלה היו הלולאות השונות ב- TypeScript. עכשיו, בואו נתקדם בהדרכת TypeScript שלנו ונבין פונקציות.
 פונקציות 
ב- JavaScript, פונקציות הם אחד החלקים החשובים ביותר מכיוון שמדובר בשפת תכנות פונקציונלית. פונקציות מבטיחות שהתוכנית ניתנת לתחזוקה ולשימוש חוזר, ומאורגנת בלוקים קריאים. בעוד ש- TypeScript מספק את הרעיון של שיעורים ומודולים, פונקציות עדיין מהוות חלק בלתי נפרד מהשפה.
 פונקציות בשם 
פונקציה בשם משמשת להצהרה ולקריאה של פונקציה בשמה הנתון.
 דוגמא: 
תצוגת פונקציה () {console.log ('פונקציית TypeScript')} תצוגה ()
 תְפוּקָה: 
פונקציית TypeScript
 פונקציה אנונימית 
פונקציה אנונימית היא פונקציה המוגדרת כביטוי. ביטוי זה נשמר במשתנה. פונקציות אלה מופעלות באמצעות שם המשתנה בו מאוחסנת הפונקציה.
 דוגמא: 
תן לברכה = פונקציה () {console.log ('פונקציית TypeScript')} ברכה ()
 תְפוּקָה: 
פונקציית TypeScript
 פונקציית חץ 
סימני חץ שמנים משמשים לפונקציות אנונימיות, כלומר לביטוי פונקציות. הם נקראים גם פונקציות למבדה בשפות אחרות.
מה זה סקריפט JavaScript
 תחביר: 
(param1, param2, ..., paramN) => ביטוי
שימוש בחץ השומן (=>) מוריד את הצורך להשתמש במילת המפתח 'פונקציה'. פרמטרים מועברים בסוגריים הזוויתיים, וביטוי הפונקציה מוקף בסוגריים המתולתלים {}.
 דוגמא: 
let sum = (x: number, y: number): number => {return x + y} sum (10, 30) // מחזיר 40
 פונקציית עומס יתר 
TypeScript מספק את הרעיון של העמסת יתר על הפונקציות. לפיכך, יכולות להיות לך מספר פונקציות עם אותו שם אך עם סוגי פרמטרים שונים וסוג החזרה.
 דוגמא: 
פונקציה להוסיף (a: מחרוזת, b: מחרוזת): פונקציית מחרוזת add (a: number, b: number): number return a + b} add ('Hello', 'Edureka') // מחזיר 'Hello Edureka' add ( 10, 10) // מחזירה 20
בדוגמה שלעיל יש לנו אותה פונקציה add () עם שתי הצהרות פונקציות והטמעת פונקציה אחת. לחתימה הראשונה שני פרמטרים של מחרוזת סוג, ואילו לחתימה השנייה יש שני פרמטרים של מספר הסוג.
אלה סוגים שונים של פונקציות. עכשיו, בואו נמשיך עם הדרכת ה- TypeScript שלנו ונבין מחרוזות ב- TypeScript.
 מדריך TypeScript: מיתרים 
ה  הוא סוג נתונים פרימיטיבי נוסף המשמש לאחסון נתוני טקסט. ערכי מחרוזת מוקפים במרכאות בודדות או במרכאות כפולות.
 תחביר: 
var var_name = מחרוזת חדשה (מחרוזת)
ישנם מאפיינים שונים של שיטות הזמינות באובייקט מחרוזת כגון:
 בּוֹנֶה - הוא מחזיר הפניה לפונקציית String שיצרה את האובייקט
 אורך - זה מחזיר את אורך המחרוזת
 אב טיפוס - מאפיין זה מאפשר להוסיף מאפיינים ושיטות לאובייקט
 דוגמא: 
let name = new String ('Welcome to Edureka!') console.log ('Message:' + name) console.log ('אורך:' + name.length)
 תְפוּקָה: 
הודעה: ברוך הבא לאדוריקה! 
 אורך: 19
 שיטות מיתרים 
רשימת השיטות באובייקט מחרוזת כוללת:
 שיטה 
 תיאור 
 charAt () 
הוא מחזיר את התו באינדקס שצוין
 charCodeAt () 
הוא מחזיר מספר המציין את ערך Unicode של התו באינדקס הנתון
 concat () 
משלב את הטקסט של שני מחרוזות ומחזיר מחרוזת חדשה
 אינדקס של() 
מחזיר את האינדקס בתוך האובייקט String המתקשר בהתרחשות הראשונה של הערך שצוין
 lastIndexOf () 
זה מחזיר את האינדקס בתוך האובייקט String המתקשר בהתרחשות האחרונה של הערך שצוין
 התאמה() 
משמש להתאמה של ביטוי רגולרי למחרוזת
 localeCompare () 
מחזיר מספר המציין אם מחרוזת הפניה מגיעה לפני או אחריה או זהה למחרוזת הנתונה בסדר המיון
 לחפש() 
פעולה זו מבצעת את החיפוש אחר התאמה בין ביטוי רגיל למחרוזת שצוינה
 החלף() 
משמש לאיתור התאמה בין ביטוי רגולרי למחרוזת, ולהחלפת המצע המתואם במצע חדש
 פרוסה() 
הוא מחלץ קטע ממחרוזת ומחזיר מחרוזת חדשה
 לְפַצֵל() 
פיצול אובייקט מחרוזת למערך מחרוזות על ידי הפרדת המחרוזת למיתרים
 substr () 
מחזירה את התווים במחרוזת המתחילה במיקום שצוין דרך מספר התווים שצוין
 substring () 
הוא מחזיר את התווים במחרוזת בין שני אינדקסים למחרוזת
 toLocaleLowerCase () 
התווים במחרוזת מומרים לאותיות קטנות תוך כיבוד האזור הנוכחי
 toLocaleUpperCase () 
התווים בתוך מחרוזת מומרים לאותיות רישיות תוך כיבוד האזור הנוכחי
 toLowerCase () 
הוא מחזיר את ערך מחרוזת הקריאה שהומר באותיות קטנות
 toUpperCase () 
הוא מחזיר את ערך מחרוזת הקריאה שהומר בגדול
 toString () 
מחזירה מחרוזת המייצגת את האובייקט שצוין
 ערך של() 
מחזירה את הערך הפרימיטיבי של האובייקט שצוין
 דוגמא: 
let str: string = 'ברוך הבא לאדוריקה' str.charAt (0) // מחזיר 'w' str.charAt (2) // מחזיר 'l' ברוך הבא לאדוריקה '. charAt (2) מחזיר' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // מחזיר 'welcomeEdureka' str1.concat ('', str2) // מחזיר 'ברוך הבא Edureka' str1.concat ('' to ' ') // מחזיר' ברוך הבא '
עכשיו שאתה יודע על מחרוזות, בוא נמשיך עם מדריך TypeScript זה ונבין מערכים.
 מערכים ב- TypeScript 
An מַעֲרָך הוא סוג מיוחד של סוג נתונים המאחסן ערכים מרובים מסוגי נתונים שונים ברצף באמצעות תחביר מיוחד. אלמנטים של מערך מזוהים על ידי מספר שלם ייחודי הנקרא מנוי או אינדקס של האלמנט.
 תחביר: 
var array_name [: datatype] // הצהרת array_name = [val1, val2, valn ..] // אתחול
 דוגמא: 
let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids = [101, 700, 321]
 שיטות מערך 
להלן רשימה של שיטות מערך שונות בהן ניתן להשתמש למטרות שונות:
 שיטה 
 תיאור 
 לְסַנֵן() 
יוצר מערך חדש עם כל האלמנטים במערך זה שעבורם פונקציית הסינון המסופקת מחזירה נכון
 כֹּל() 
מחזירה אמת אם כל רכיב במערך זה מספק את פונקציית הבדיקה המסופקת
 concat () 
מחזירה מערך חדש המורכב ממערך זה המחובר למערכים אחרים
 אינדקס של() 
מחזיר את האינדקס הראשון או הפחות של אלמנט בתוך המערך השווה לערך שצוין
 לכל אחד() 
קורא לפונקציה עבור כל רכיב במערך
 לְהִצְטַרֵף() 
מצטרף לכל מרכיבי המערך למחרוזת
 lastIndexOf () 
מחזיר את האינדקס האחרון או הגדול ביותר של אלמנט בתוך המערך השווה לערך שצוין
 מַפָּה() 
יוצר מערך חדש עם תוצאות קריאה לפונקציה מסופקת על כל רכיב במערך זה
 לִדחוֹף() 
מוסיף אחד או יותר אלמנטים בסוף מערך ומחזיר את האורך החדש של המערך
 פופ () 
מסיר את האלמנט האחרון ממערך ומחזיר את האלמנט הזה
 לְהַפחִית() 
החל פונקציה בו זמנית כנגד שני ערכים של המערך משמאל לימין כדי להקטין אותה לערך יחיד
 להפחית נכון () 
החל פונקציה בו זמנית כנגד שני ערכים של המערך מימין לשמאל כדי להפחית אותה לערך יחיד
 לַהֲפוֹך() 
הופך את סדר האלמנטים של המערך
 מִשׁמֶרֶת() 
מסיר את האלמנט הראשון ממערך ומחזיר את האלמנט הזה
 פרוסה() 
מחלץ קטע ממערך ומחזיר מערך חדש
 כמה() 
ממיר כפול ל- int
זה מחזיר אמת אם לפחות אלמנט אחד במערך זה מספק את פונקציית הבדיקה המסופקת
 סוג() 
זה ממיין את האלמנטים של מערך
 toString () 
מחזירה מחרוזת המייצגת את המערך ורכיביו
 אִחוּי() 
זה מוסיף ו / או מסיר אלמנטים ממערך
 ביטול משמרת () 
מוסיף אלמנט אחד או יותר לחזית המערך ומחזיר את האורך החדש של המערך
 דוגמא: 
שם שם: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // output: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // פלט: Tara name.push ('רחל') console.log (שם) // פלט: ['ג'ון', 'דייזי', 'רחל']
עכשיו בואו להתקדם עם מדריך TypeScript זה ונלמד על ממשקים.
 ממשקי TypeScript 
הממשק הוא מבנה שמגדיר את החוזה ביישום שלך. הוא מגדיר את התחביר שיעורים. הוא מכיל רק את הצהרת החברים ובאחריותו של מעמד הגזירה להגדיר את החברים.
 דוגמא: 
ממשק עובד {empID: number empName: string getSalary: (number) => number // function arrow getManagerName (number): string}
בדוגמה שלעיל, עוֹבֵד הממשק כולל שני מאפיינים אמפיד ו empName . זה כולל גם הצהרת שיטה getSalaray באמצעות פונקצית חץ הכולל פרמטר מספר אחד וסוג החזרת מספר. ה getManagerName שיטה מוכרזת באמצעות פונקציה רגילה.
 TypeScript  שיעורים 
TypeScript הציג שיעורים כדי שיוכלו להיעזר ביתרונות של טכניקות מונחות עצמים כמו אנקפסולציה והפשטה. המחלקה ב- TypeScript מורכבת לפונקציות JavaScript רגילות על ידי מהדר TypeScript לעבודה בפלטפורמות ודפדפנים.
שיעור כולל את הדברים הבאים:
 בּוֹנֶה 
 נכסים 
 שיטות 
 דוגמא: 
מחלקה עובד {empID: number empName: constructor constructor (ID: number, name: string) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}
 יְרוּשָׁה 
תמיכה ב- TypeScript יְרוּשָׁה כיוון שהיא היכולת של תוכנית ליצור כיתות חדשות ממעמד קיים. המחלקה המורחבת ליצירת כיתות חדשות יותר נקראת מחלקת האם או מחלקת העל. הכיתות שזה עתה נוצרו נקראות ילד או כיתות משנה.
מחלקה עוברת בירושה ממחלקה אחרת באמצעות מילת המפתח 'מרחיב'. כיתות ילדים יורשות את כל המאפיינים והשיטות למעט חברים פרטיים ובונים ממחלקת ההורים. עם זאת, TypeScript אינו תומך בירושה מרובה.
 תחביר: 
הכיתה child_class_name מרחיבה שם_הורה class
 דוגמא: 
מחלקה אדם {שם: קונסטרוקטור מחרוזת (שם: מחרוזת) {this.name = name}} מחלקה עובד מאריך אדם {empID: constructor number (empID: number, name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', ID עובד =' + this.empID)}} let emp = עובד חדש (701, 'ג'ייסון') emp.displayName () // שם = ג'ייסון, תעודת עובד = 701
עכשיו, כשיודעים על שיעורים, בואו נמשיך עם הדרכת TypeScript ונלמד על אובייקטים.
 אובייקטים ב- TypeScript 
אובייקט הוא מופע המכיל קבוצה שונה של זוגות ערך מפתח. הערכים יכולים להיות ערכים או פונקציות סקלריות או אפילו מערך של אובייקטים אחרים.
 תחביר: 
var object_name = {key1: 'value1', // value scalar key2: 'value', key3: function () {// functions}, key4: ['content1', 'content2']
אובייקט יכול להכיל ערכים סקלריים, פונקציות ומבנים כמו מערכים ושוליים.
 דוגמא: 
var person = {firstname: 'Danny', lastname: 'Green'} // גישה לערכי האובייקט console.log (person.firstname) console.log (person.lastname)
בעת הידור, הוא ייצור את אותו הקוד ב- JavaScript.
 תְפוּקָה: 
דני 
 ירוק
אלה היו האלמנטים החשובים השונים של TypeScript. עכשיו, בואו נמשיך עם מדריך TypeScript זה ונראה דוגמה להבנת מקרה השימוש.
 מדריך TypeScript: שימוש במקרה 
כאן נלמד כיצד להמיר קיים  ל- TypeScript.
כאשר אנו מרכיבים קובץ TypeScript, הוא מייצר קובץ JavaScript תואם עם אותו שם. כאן עלינו לוודא שקובץ ה- JavaScript המקורי שלנו המשמש כקלט אינו יכול להיות באותה ספריה כדי ש- TypeScript לא יעקוף אותם.
תהליך המעבר מ- JavaScript ל- TypeScript כולל את השלבים הבאים:
 1. הוסף קובץ tsconfig.json לפרויקט 
עליך להוסיף קובץ tsconfig.json לפרויקט. TypeScript משתמש בקובץ tsconfig.json לניהול אפשרויות הידור של הפרויקט, כגון אילו קבצים ברצונך לכלול ולא לכלול.
{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}
 2. השתלב בכלי לבנות 
לרוב פרויקטים של JavaScript יש כלי בנייה משולב כמו gulp או webpack. ניתן לשלב פרויקטים עם webpack בדרכים הבאות:
הפעל את הפקודה הבאה במסוף:
$ npm התקן מקור-מפות-מטעין מדהים-typescript-loader
בשילוב webpack, אתה משתמש ב- loader מדהים-typescript בשילוב עם source-map-loader לצורך ניפוי באגים קל יותר בקוד המקור.
שנית, מיזג את מאפיין התצורה של המודול בקובץ webpack.config.js כדי לכלול מעמיסים.
 3. העבר את כל קבצי .js לקבצי .ts 
בשלב זה, עליך לשנות את שם הקובץ .js לקובץ .ts. באופן דומה, אם הקובץ משתמש ב- JSX, יהיה עליך לשנות את שמו ל- .tsx. כעת, אם נפתח את הקובץ בעורך התומך ב- TypeScript, חלק מהקודים עשויים להתחיל לתת שגיאות אוסף. לכן, המרת קבצים בזה אחר זה מאפשרת טיפול קל יותר בשגיאות אוסף. אם TypeScript מוצא שגיאות אוסף במהלך ההמרה, הוא עדיין מסוגל לתרגם את הקוד.
 4. בדוק אם קיימות שגיאות 
לאחר העברת קובץ js לקובץ ts, באופן מיידי, TypeScript יתחיל את בדיקת הקודים של הקוד שלנו. לכן, ייתכן שתקבל שגיאות אבחון בקוד JavaScript.
 5. השתמש בספריות JavaScript של צד שלישי 
פרויקטים של JavaScript משתמשים בספריות צד שלישי כמו  או לודאש. על מנת לקמפל קבצים, TypeScript צריך לדעת את סוגי כל האובייקטים בספריות אלה. קבצי הגדרת TypeScript לספריות JavaScript כבר זמינים ב- DefinitelyTyped. לכן, אין צורך להתקין סוג זה באופן חיצוני. עליך להתקין רק את הסוגים המשמשים בפרויקט שלנו.
עבור jQuery, אתה יכול להתקין את ההגדרה:
$ npm install @ types / jquery
לאחר מכן, בצע את השינויים בפרויקט JavaScript, הפעל את כלי הבנייה. כעת, עליך להרכיב את פרויקט TypeScript ל- JavaScript רגיל שניתן להריץ בדפדפן.
עם זאת הגענו לסוף מדריך TypeScript זה. אני מקווה שהבנת את כל האלמנטים החשובים של TypeScript.
 בדוק את     מאת אדוריקה.  הדרכת הסמכת פיתוח אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו לשירות אחסון פשוט של אמזון (S3). 
 יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות של 'מדריך TypeScript' ונחזור אליך.