TypeScript הוא ערכת-על מוקלדת של JavaScript, שמטרתה להפוך את השפה ליותר מדרגית ואמינה.
קוד פתוח הוא מתוחזק על ידי מיקרוסופט מאז שיצרו אותו בשנת 2012. עם זאת, TypeScript קיבלה את פריצת הדרך הראשונית שלה כשפת התכנות המרכזית ב- Angular 2. מאז היא ממשיכה לגדול, גם בקהילות React ו- Vue.
במדריך זה תלמד את היסודות של TypeScript בעזרת דוגמאות מעשיות.
אנו עומדים להשיק קורס TypeScript בחינם בן 22 חלקים ב- Scrimba. השאר את הדוא"ל שלך כאן אם אתה רוצה גישה מוקדמת!
בוא נתחיל.
התקנת TypeScript
לפני שנתחיל בקידוד, עלינו להתקין את TypeScript במחשב שלנו. נשתמש npmבזה, אז פשוט פתח את המסוף והקלד את הפקודה הבאה:
npm install -g typescript לאחר התקנתו, אנו יכולים לאמת זאת על ידי הפעלת הפקודה tsc -vשתציג את גרסת ה- TypeScript המותקנת.
כותב קצת קוד
בואו ניצור את קובץ ה- TypeScript הראשון ונכתוב בתוכו קוד. פתח את IDE או עורך הטקסט המועדף עליך וצור קובץ בשם first.ts - עבור קבצי TypeScript אנו משתמשים בסיומת.ts
לעת עתה, אנו רק נכתוב כמה שורות של JavaScript ישן רגיל, מכיוון שכל קוד JavaScript הוא גם קוד TypeScript תקף:
let a = 5; let b = 5; let c = a + b; console.log(c); השלב הבא הוא לאסוף את ה- TypeScript שלנו ל- JavaScript רגיל, שכן הדפדפנים רוצים .jsשקבצים ייקראו.
קומפילציה של TypeScript
לצורך הידור, נפעיל את הפקודה של tsc filename.ts, שיוצרת קובץ JavaScript עם אותו שם קובץ אך עם סיומת שונה, ואשר בסופו של דבר נוכל להעביר לדפדפנים שלנו.
אז פתח את הטרמינל במיקום הקובץ והפעל את הפקודה הבאה:
tsc first.ts טיפ : אם ברצונך לאסוף את כל קבצי TypeScript בתוך תיקיה כלשהי, השתמש בפקודה:tsc *.ts
סוגי מידע
TypeScript - כשמו כן הוא - הוא הגרסה המוקלדת של JavaScript. זה אומר שאנחנו יכולים לציין סוגים למשתנים שונים בזמן ההכרזה. הם תמיד יחזיקו באותו סוג נתונים בהיקף זה.
הקלדה היא תכונה שימושית מאוד על מנת להבטיח אמינות ומדרגיות. בדיקת סוג עוזרת להבטיח שהקוד שלנו עובד כצפוי. כמו כן, זה עוזר לצוד באגים ושגיאות ולתעד כראוי את הקוד שלנו.
התחביר להקצאת סוג לכל משתנה הוא לכתוב את שם המשתנה ואחריו :סימן, ואז את שם הסוג ואחריו =סימן ואת ערך המשתנה.
ישנם שלושה סוגים שונים ב- TypeScript: anyהסוג, Built-inהסוגים User-definedוהסוגים. בואו נסתכל על כל אחד מהם.
כל סוג
anyסוג הנתונים הוא קבוצת-על של כל סוגי הנתונים בכתב יד מודפס. מתן משתנה כלשהו מסוג anyזה שווה ערך לביטול בדיקת סוג למשתנה.
let myVariable: any = 'This is a string' סוגים מובנים
אלה הסוגים שנבנו ב- TypeScript. הם כוללים number, string, boolean, void, nullו undefined.
let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; סוגים מוגדרים על ידי המשתמש
User-definedהסוגים כוללים enum, class, interface, array, ו tuple. נדון בכמה מאלה בהמשך מאמר זה.
תכנות מונחה עצמים
TypeScript תומך בכל התכונות של תכנות מונחה עצמים, כגון מחלקות וממשקים. יכולת זו מהווה דחיפה עצומה ל- JavaScript - מאז ומתמיד היא נאבקה בפונקציונליות ה- OOP שלה, במיוחד מאז שהמפתחים החלו להשתמש בה ליישומים בקנה מידה גדול.
מעמד
בתכנות מונחה עצמים, מחלקה היא תבנית האובייקטים. מחלקה מגדירה כיצד ייראה אובייקט מבחינת התכונות והפונקציות של אותו אובייקט. מחלקה מכילה גם נתונים עבור האובייקט.
TypeScript has built-in support for classes, which were unsupported by ES5 and earlier versions. This means we can use the class keyword to easily declare one.
class Car { // fields model: String; doors: Number; isElectric: Boolean; constructor(model: String, doors: Number, isElectric: Boolean) { this.model = model; this.doors = doors; this.isElectric = isElectric; } displayMake(): void { console.log(`This car is ${this.model}`); } } In the above example, we have declared a Car class, along with some of its properties, which we’re initializing in the constructor. We also have a method which would display some message using its property.
Let’s see how we can create a new instance of this class:
const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius To create an object of a class, we use the keyword of new and call the constructor of the class and pass it the properties. Now this object Prius has its own properties of model, doors, and isElectric. The object also can call the method of displayMake, which would have access to the properties of Prius.
Interface
הרעיון של ממשקים הוא תכונה חזקה נוספת של TypeScript, המאפשרת להגדיר את מבנה המשתנים. ממשק הוא כמו חוזה תחבירי שאובייקט צריך להתאים אליו.
ממשקים מתוארים בצורה הטובה ביותר באמצעות דוגמה ממשית. אז נניח שיש לנו מטרה של Car:
const Car = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } אם נסתכל על האובייקט לעיל וננסה לחלץ את חתימתו, זה יהיה:
{ model: String, make: String, display(): void } אם ברצוננו לעשות שימוש חוזר בחתימה זו, נוכל להכריז עליה בצורה של ממשק. כדי ליצור ממשק, אנו משתמשים במילת המפתח interface.
interface ICar { model: String, make: String, display(): void } const Car: ICar = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } כאן הכרזנו על ממשק שנקרא ICarויצרנו אובייקט Car. Carמחייב כעת את ICarהממשק, ומבטיח Carשהאובייקט מגדיר את כל המאפיינים שנמצאים בממשק.
סיכום
So I hope this gave you a quick glimpse into how TypeScript can make your JavaScript more stable and less prone to bugs.
TypeScript is gaining a lot of momentum in the world of web development. There’s also an increasing amount of React developers who are adopting it. TypeScript is definitely something any front-end developer in 2018 should be aware of.
Happy coding :)
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
