מבוא פשוט ל-Typescript

מהדר TypeScript

מהדר TypeScript הוא תוכנת JavaScript הממירה קוד TypeScript לקוד JavaScript רגיל. הוא כתוב ב-TypeScript וניתן להפעיל אותו בכל פלטפורמה שתומכת ב-JavaScript. מהדר TypeScript הוא קוד פתוח וזמין ב-GitHub. המהדר פותח ומתוחזק על ידי מיקרוסופט וניתן להשתמש בו משורת הפקודה, או שהוא יכול לשמש כפלאגין עבור IDEs פופולריים כגון Visual Studio ו-WebStorm.

מהדר TypeScript יכול לפלוט קוד JavaScript התואם לזמני ריצה שונים של JavaScript, כגון Node.js, Internet Explorer ו-Chrome. זה יכול גם ליצור מפות מקור, הממפות את קוד ה-JavaScript שנוצר בחזרה לקוד TypeScript. זה מאפשר איתור באגים של קוד TypeScript בדפדפן.

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

לא שפה מודפסת חזק

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

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

// We initialze the variable as a string.
const something: any = "Tom";

// Now it's a number. This is valid TypeScript code.
something = 42;

קומפילציה של TypeScript ל-JavaScript

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

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

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

שרת שפות TypeScript

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

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

שלבים ליצירת פרויקט TypeScript

לפני תיאור השלבים, הנה הפקודה לאתחל פרויקט TypeScript בטרמינל שלך.

npx tsc --init

תיאור: התקן את מהדר TypeScript. צור קובץ tsconfig.json בשורש הפרוייקט. קובץ זה מכיל את אפשרויות המהדר עבור מהדר TypeScript. הוסף את ספריית src לקובץ tsconfig.json. זה המקום שבו קובצי המקור של TypeScript ימוקמו.

הוסף קובץ main.ts בספריית src. זוהי נקודת הכניסה לתוכנית TypeScript. קומפילו את קוד TypeScript על ידי הפעלת tsc משורת הפקודה. פעולה זו תיצור את קבצי ה-JavaScript בספריית ה-src. הפעל את תוכנית TypeScript על ידי הפעלת node main.js משורת הפקודה.

הבדלים בין TypeScript ל-JavaScript

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

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

TypeScript תומך בגנריות, המאפשרות איסוף בטוח מסוגים ומבני נתונים אחרים. זה לא זמין ב-JavaScript.

מתי עלי להשתמש ב-Javascript במקום ב-Typescript לקידוד?

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

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

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

דוגמאות פשוטות

// TypeScript.
class Person {
  name: string;
  age: number;
}

const person: Person = new Person();
const person.name = "Tom";
const person.age = 42;

// JavaScript.
var Person = function() {};
Person.prototype.name = "";
Person.prototype.age = 0;

// TypeScript.
// Here's we're also using the class, but this
// time conforming to an interface, something that
// doesn't exist in JavaScript.
interface IPerson {
  name: string;
  age: number;
}

class Person implements IPerson {
  name: string;
  age: number;
}

// JavaScript.
var IPerson = function() {};
IPerson.prototype.name = "";
IPerson.prototype.age = 0;

var Person = function() {};
Person.prototype = Object.create(IPerson);

מילות סיום

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

עיין בקישורים בתוספת שבסוף העמוד לכמה חומרי למידה שימושיים.