איך להמיר פרוייקט מ־JS ל־TS

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


אם אנחנו משתמשים ב־Electron, אפשר להשתמש ב־Quickstart Project שלהם כדי להעתיק משם כמה קודים.

  1. להוסיף קובץ typescript.json בפרוייקט. את התוכן אפשר להעתיק מכאן (או מפרוייקט אחר).
  2. להתקין typescript (על ידי פקודת npm i typescript)
  3. צריך להריץ npx tsc בפעם הראשונה.
  4. להמיר את קבצי ה־js שלנו ל־ts.
  5. ב־package.json להוסיף סקריפט tsc. צריך לוודא שהיא אכן רצה לפני כל build, start וכו'.
  6. במידה ויש (סביר להניח שיש) קובץ שמשתמש בקבצי הסקריפט שלנו (שעכשיו הם ts), צריך לכוון אותם מחדש לקבצי ה־js המקומפל (שבטח יהיה תחת תיקיית /dist).
  7. עכשיו בוודאי נצטרך להוסיף כל מני types כדי לא לקבל שגיאות. לדוגמה `npm i –save-dev @types/winattr`. לחלק ויש וחלק לא (נדע אם ניגש ל־NPM ונמצא אייקון של DT [Definitly Typed] ליד הכותרת. האייקון נראה כך. אם אין type לחבילה, או שמדובר בקוד פנימי שקשור לפרוייקט שלנו, צריך ליצור את ה־types בעצמנו. אנחנו יכולים להשתמש ב־type או ב־interface.
  8. הפרוייקט שלנו שאמור להיות כתוב בתוך תיקית SRC צריך להיות מועבר (ומקומפל) לתיקית DIST. כדי לגרום לקבצים שהם לא TS לעבור גם כן, נצטרך להוסיף סקריפט חדש ב package.json. הסקריפט: "copy-files": "cp -r src/* dist", חיסרון אחד בקוד הזה הוא שהוא מעתיק גם את קבצי הTS. (מחפש לזה פתרון…)
  9. צריך להוסיף את תיקיית dist ל־.gitignore
  10. ה־VS ימצא דברים מתוך תיקית ה־dist ולא נרצה זאת בזמן שאנחנו מפתחים. (מחפש פתרון…)
  11. עוד בעיה שניתקל בה, זה כשנריץ את הפרוייקט שלנו ונמצא שגיאה, זה יאמר לנו מה השגיאה ויכוון אותנו לקבצים המקומפלים ולא לקבצי המקור, מה שמאריך מאוד את זמן הפיתוח (כדי לאתר איפה הבעיה באמת קרתה). בשביל זה משתמשים ב־Source Maps. בפרוייקט שאני משתמש ב־Electron איתו, השתמשתי לראשונה ב־Debugger המובנה של VSCode. עשינו את זה על ידי הוספה של .vscode/launch.json בטאב של ה־Debugger. ולאחר מכן העתקנו את ה־Configuration מכאן. (שינינו את תיקית ההרצה [המופיעה ב־runtimeArgs] לתיקיה שלנו dist). עכשיו כשלוחצים Play, זה מריץ את התוכנה יחד עם ה־Debugger ונוכל לפתח ככה בנוחות.
  12. בעקבות זה שהוספנו את ה־Debugger, הוא מריץ את התוכן של dist, אבל הוא לא עושה compile לפרוייקט לפני כן. לכן צריך להוסיף Task של VSCode, דבר ראשון. CTRL+SHIFT+P ואז TASK ואז Configure Task. יש לבחור את הפקודה שאנחנו רוצים. במקרה שלנו TSC Build (זה הופיע לי בסוף הרשימה).
    טיפ: אם לוחצים ctrl+p ואז כותבים task עם רווח, זה ייתן אופציה להריץ את סקריפט שכתוב ב־tasks.json.
  13. לא סיימנו, כי עכשיו צריך להוסיף את ה־Task שיצרנו כפעולה שתעבוד רגע לפני שה־Debugger מתנגן. אז בקובץ launch.json צריך להוסיף לערך preLaunchTask את ה־Label של ה־Task (הוא יופיע בקובץ tasks.json). קוד לדוגמה: "preLaunchTask": "tsc: build - tsconfig.json"
  14. דאן! עכשיו כשנריץ F5 זה יריץ את הפקודה.

דברים שאני כותב

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פוסט בהפתעה?