TypeScript לעומת JavaScript: להבין את ההבדלים

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

מה זה JavaScript?

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

הכנסת ה- JavaScript של הלקוח בצד הלקוח ב- Netscape Navigator הובילה במהירות ואחריו הצגת ה- JavaScript בצד השרת בשרתי האינטרנט Netscape Enterprise Server וב- Microsoft IIS. כעבור כ- 13 שנים, ריאן דאל הציג את Node.js כסביבת זמן ריצה של קוד פתוח, חוצה פלטפורמות, ללא תלות בכל דפדפן או שרת אינטרנט.

שפת JavaScript

JavaScript הוא שפה מרובת פרדיגמות. יש לו תחביר סוגריים מתולתל ונקודה-פסיק, כמו משפחת השפות C. יש לו הקלדה דינמית חלשה והוא מתפרש או נערך (לעתים קרובות יותר) בדיוק בזמן. באופן כללי, JavaScript הוא בעל הברגה אחת, אם כי יש ממשק API של Web Workers שעושה ריבוי השחלות, ויש אירועים, קריאות פונקציות אסינכרוניות וקריאות חוזרות.

JavaScript תומך בתכנות מונחה עצמים באמצעות אבות-טיפוס ולא בירושת המחלקה המשמשת ב- C ++, Java ו- C #, אם כי classתחביר נוסף ל- JavaScript ES6 בשנת 2015. JavaScript תומך גם בתכנות פונקציונאלי כולל סגירות, רקורסיה ו- lambdas (פונקציות אנונימיות).

לפני JavaScript ES6 בשפה לא הייתה אופטימיזציה של שיחת זנב; עכשיו זה קורה, אם כי עליך להפעיל מצב קפדני ( 'use strict') כדי לאפשר זאת, והיישום משתנה מדפדפן לדפדפן. מצב קפדני משנה גם את הסמנטיקה של JavaScript ומשנה כמה שגיאות שקטות בדרך כלל כדי להשליך שגיאות.

מה עם הכינוי "ES6"? השם של שפת JavaScript הסטנדרטית הוא ECMAScript (ES), על שם גוף התקנים הבינלאומי של ECMA; ES6 נקרא גם ECMAScript 2015 (ES2015). ES2020 הוא כרגע טיוטת תקן.

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

var שעה = תאריך חדש (). getHours ();

ברכת var;

אם (שעה <18) {

  ברכה = "יום טוב";

} אחר {

  ברכה = "ערב טוב";

}

document.getElementById ("הדגמה"). innerHTML = ברכה;

מערכת אקולוגית של JavaScript

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

ממשקי ה- API של הדפדפן כוללים את מודל אובייקט המסמך (DOM) ומודל אובייקט הדפדפן (BOM), מיקום גיאוגרפי, Canvas (גרפיקה), WebGL (גרפיקה מואצת ב- GPU), HTMLMediaElement (שמע ווידאו) ו- WebRTC (תקשורת בזמן אמת).

ממשקי API של צד שלישי נמצאים בשפע. חלקם ממשקים ליישומים מלאים, כגון מפות גוגל. אחרים הם כלי עזר שמקל על תכנות HTML5 ו- CSS של JavaScript, כמו jQuery. חלקן, כמו אקספרס, הן מסגרות יישומים למטרות ספציפיות; עבור אקספרס, המטרה היא לבנות שרתי אינטרנט ויישומים ניידים ב- Node.js. מספר מסגרות אחרות נבנו על גבי אקספרס. בשנת 2016 דנתי ב 22 מסגרות JavaScript במטרה להבין מה הופך להיות משהו לגן חיות; רבים מהמסגרות הללו עדיין קיימות בצורה כזו או אחרת, אך כמה מהן עברו דרך הדרך.

יש הרבה יותר מודולי JavaScript, מעל 300,000. כדי להתמודד עם זה, אנו משתמשים במנהלי חבילות , כגון npm, מנהל החבילות המוגדר כברירת מחדל עבור Node.js.

אלטרנטיבה אחת ל- npm היא Yarn שהגיעה מפייסבוק וטוענת ליתרון של התקנות דטרמיניסטיות. כלים דומים כוללים את Bower (מטוויטר), שמנהל רכיבי חזית במקום מודולים של Node; אנדר, המכנה את עצמו אחותו הקטנה של npm; ו- jspm המשתמשת במודולי ES (תקן ECMA החדש יותר למודולים), ולא במודולי CommonJS, הסטנדרט הוותיק יותר דה-פקטו הנתמך על ידי npm.

Webpack מצרף מודולי JavaScript לנכסים סטטיים עבור הדפדפן. Browserify מאפשרת למפתחים לכתוב מודולים בסגנון Node.js שמתקבצים לשימוש בדפדפן. Grunt הוא רץ משימות JavaScript שמקורו בקבצים, ו- gulp היא מערכת לבנות סטרימינג ורץ משימות JavaScript. הבחירה בין גרנה לגימה אינה מכריעה. התקנתי וגם השתמשתי במי שהוגדר עבור פרויקט נתון.

כדי להפוך את קוד JavaScript לאמין יותר בהעדר אוסף, אנו משתמשים בפינות. המונח מגיע מכלי המוך בשפה C, שהיה כלי שירות יוניקס סטנדרטי. קישורי JavaScript כוללים את JSLint, JSHint ו- ESLint. אתה יכול להפוך ריצות פועל אוטומטיות לאחר שינויים בקוד באמצעות רץ משימות או IDE שלך. שוב, הבחירה בין הסינרים אינה ברורה, ואני משתמש בכל אחד שהוגדר לפרויקט נתון.

אם כבר מדברים על עורכי ו- IDE, סקרתי 6 IDE של JavaScript ו- 10 עורכי JavaScript, לאחרונה בשנת 2019. הבחירות המובילות שלי היו טקסט נשגב (עורך מהיר מאוד), קוד Visual Studio (עורך / IDE הניתן להגדרה) ו- WebStorm (IDE).

Transpilers מאפשרים לך לתרגם כמה שפות אחרות כגון CoffeeScript או TypeScript ל- JavaScript, ולתרגם JavaScript מודרני (כגון קוד ES2015) ל- JavaScript בסיסי שפועל (כמעט) בכל דפדפן. (כל ההימורים מושבתים בגירסאות מוקדמות של Internet Explorer.) העברת המשחק הנפוצה ביותר עבור JavaScript מודרני היא בבל.

מה זה TypeScript?

TypeScript הוא ערכת-על מוקלדת של JavaScript שמתכנסת ל- JavaScript רגיל (ES3 ומעלה; ניתן להגדרה). ניתן להתקין את מהדר שורת הפקודה TypeScript בקוד פתוח כחבילה של Node.js. תמיכה ב- TypeScript מגיעה עם Visual Studio 2017 ו- Visual Studio 2019, Visual Studio Code ו- WebStorm, וניתן להוסיף אותם לטקסט נשגב, Atom, Eclipse, Emacs ו- Vim. מהדר TypeScript / טרנספילר tsc כתוב ב- TypeScript.

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

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

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

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

שפת TypeScript

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

המדריך ל- TypeScript תוך 5 דקות מבהיר את היתרונות. נקודת המוצא היא JavaScript טהור עם סיומת .ts:

מברך פונקציה (אדם) {

  החזירו "שלום" + אדם;

}

let user = "משתמש ג'יין";

document.body.textContent = מברך (משתמש);

אם תרכיב את זה עם tsc זה יפיק קובץ זהה עם סיומת .js.

במדריך אתה משנה קוד זה באופן שלבי, הוספת הערת סוג person:stringבהגדרת הפונקציה, קומפילציה, בדיקת סוג בדיקה על ידי המהדר, הוספת ממשק personלסוג ולבסוף הוספת מחלקה עבור Student. הקוד הסופי הוא:

תלמיד בכיתה {

    fullName: מחרוזת;

    constructor (public firstName: string, public middle ראשית: string,

        שם משפחה ציבורי: מחרוזת) {

            this.fullName = שם פרטי + "" + MiddleInitial + "" + שם משפחה;

    }

}

ממשק אדם {

    firstName: מחרוזת;

    lastName: מחרוזת;

}

מברך פונקציה (אדם: אדם) {

    להחזיר "שלום", + person.firstName + "" person.lastName;

}

let user = new student ("Jane", "M.", "User");

document.body.textContent = מברך (משתמש);

כאשר אתה מרכיב את זה ומסתכל על ה- JavaScript הנפלט, תראה שהמחלקות ב- TypeScript הן רק קיצור של אותה ירושה מבוססת אב-טיפוס המשמשת ב- JavaScript ES3 רגיל. שימו לב כי את המאפיינים person.firstNameואת person.lastNameנוצרים באופן אוטומטי על ידי המהדר כשזה רואה שלהם publicתכונות של Studentהבנאים בכיתה, וגם ממשיך הלאה אלי Personהממשק. אחד היתרונות הנחמדים ביותר של הערות סוג ב- TypeScript הוא שהם מוכרים על ידי הכלים, כגון קוד Visual Studio:

אם יש שגיאות בקוד בעת עריכתך בקוד VS, תראה את הודעות השגיאה בכרטיסיה בעיות, למשל את הדברים הבאים אם תמחק את סוף השורה בתגובה של Student:

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

בין היתר, יהיה עליך לשנות מבוסס-מודול require()או define()הצהרות להצהרות ייבוא ​​של TypeScript ולהוסיף קבצי הצהרה עבור כל מודולי הספרייה שבהם אתה משתמש. אתה צריך גם לכתוב מחדש את יצוא המודולים שלך באמצעות exportהצהרת TypeScript . TypeScript תומך במודולי CommonJS, כמו ש- Node.js עושה.

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

בדרך כלל אינך צריך לכתוב קבצי הצהרה משלך לספריות JavaScript ברשות הציבור. DefinitelyTyped הוא מאגר של קבצי הצהרה, שכולם נגישים באמצעות npm. אתה יכול למצוא את ההצהרות באמצעות דף TypeSearch.

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

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