שימוש ב-TypeScript ל-Cloud Functions

למפתחים שמעדיפים לכתוב פונקציות ב-TypeScript, יש ב-Cloud Functions שני סוגי תמיכה:

  • יצירת פרויקטים של TypeScript והגדרתם לטרנספיילציה אוטומטית במהלך האינטליגנציה (firebase init functions).
  • להמיר מקור TypeScript קיים ל-JavaScript בזמן הפריסה באמצעות הוק לפני פריסה.

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

  • TypeScript תומך בתכונות JavaScript עדכניות כגון אסינכרוני/await, ניהול הבטחות פשוט יותר
  • איתור שגיאות בקוד (linter) של Cloud Functions מדגיש בעיות נפוצות בזמן כתיבת הקוד
  • איך תכונות הבטיחות של הטיפוסים עוזרות למנוע שגיאות זמן ריצה בפונקציות שנפרסו

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

איך מפעילים פרויקט Cloud Functions חדש באמצעות TypeScript

מריצים את firebase init functions בספרייה חדשה. הכלי הזה מאפשר לבנות את הפרויקט באמצעות JavaScript או TypeScript. בוחרים ב-TypeScript כדי ליצור את מבנה הפרויקט הבא:

myproject
 +- functions/     # Directory containing all your functions code
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- tsconfig.json
      |
      +- .eslintrc.js # Optional file if you enabled ESLint
      +- tsconfig.dev.json # Optional file that references .eslintrc.js
      |
      +- src/     # Directory containing TypeScript source
      |   |
      |   +- index.ts  # main source file for your Cloud Functions code
      |
      +- lib/
          |
          +- index.js  # Built/transpiled JavaScript code
          |
          +- index.js.map # Source map for debugging

בסיום תהליך האתחול, מבטלים את ההערה על הדוגמה בקובץ index.ts ומריצים את הפקודה npm run serve כדי לראות את הפונקציה Hello World בפעולה.

שימוש בפרויקט TypeScript קיים

אם יש לכם פרויקט TypeScript קיים, תוכלו להוסיף הוק לפני הפריסה כדי לוודא שהפרויקט עובר טרנספיילציה בכל פעם שאתם פורסים את הקוד ב-Cloud Functions for Firebase. תצטרכו קובץ tsconfig.json בפורמט תקין ופרויקט Firebase, ותצטרכו לבצע את השינויים הבאים בתצורה של Firebase:

  1. עורכים את הקובץ package.json כדי להוסיף סקריפט bash ליצירת הפרויקט ב-TypeScript. לדוגמה:

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  2. עורכים את firebase.json כדי להוסיף הוק לפריסה מראש להרצת סקריפט ה-build. לדוגמה:

     {
   "functions": {
     "predeploy": "npm --prefix functions run build",
   }
 }

עם ההגדרה הזו, הפקודה firebase deploy --only functions יוצרת את קוד TypeScript ומפרסמת אותו כפונקציות.

העברת פרויקט JavaScript קיים ל-TypeScript

אם יש לכם פרויקט Cloud Functions קיים שהפעלתם ופיתחתם ב-JavaScript, תוכלו להעביר אותו ל-TypeScript. מומלץ מאוד ליצור נקודת עצירה ב-git או גיבוי אחר לפני שמתחילים.

כדי להעביר פרויקט JavaScript קיים מסוג Cloud Functions:

  1. יוצרים נקודת עצירה ב-git ושומרים עותקים של קובצי המקור הקיימים של JavaScript.
  2. בספריית הפרויקטים מריצים את הפקודה firebase init functions ובוחרים את הפקודה TypeScript כשתוצג הבקשה לשפה לכתיבת פונקציות.
  3. כשמתבקשים להחליף את הקובץ package.json הקיים, בוחרים באפשרות לא, אלא אם אתם בטוחים שאתם לא רוצים לשמור את הקובץ הקיים.
  4. מוחקים את index.ts בספרייה functions/src ומחליפים אותו בקוד המקור הקיים.
  5. בקובץ tsconfig.json שנוצר במהלך האינטליגנציה, מגדירים את אפשרויות המהדר כך שיאפשרו JavaScript:‏ "allowJs": true.
  6. מעתיקים את קובץ package.json השמור לתיקייה functions ועורכים אותו כדי להגדיר את "main" כ-"lib/index.js".

  7. בנוסף, ב-package.json, מוסיפים סקריפט build עבור TypeScript, למשל:

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  8. אפשר להוסיף את "typescript" כתלות למפתחים על ידי הרצה של npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser.

  9. כדי לראות את כל יחסי התלות, מריצים את הפקודה npm install --save @types/<dependency>.

  10. כותבים מחדש את קוד המקור מ- .js ל- .ts לפי הצורך.

יצירת אמולציה של פונקציות TypeScript

כדי לבדוק פונקציות TypeScript באופן מקומי, אפשר להשתמש בכלי ההדמיה שמפורטים בקטע הרצת פונקציות באופן מקומי. חשוב להדר את הקוד לפני שמשתמשים בכלים האלה, אז הקפידו להריץ את npm run build בספריית הפונקציות לפני שמריצים את firebase emulators:start או את firebase functions:shell. לחלופין, מריצים את npm run serve או את npm run shell כקיצור דרך. גם הפקודות האלו מריצים את ה-build וגם את המעטפת של הפונקציות ומפעילים/מפעילים אותן.

יומני Functions לפרויקטים של TypeScript

במהלך firebase deploy, ה-index.ts של הפרויקט עובר טרנספיילציה ל-index.js, כלומר יוצגו ביומן של Cloud Functions מספרי שורות מהקובץ index.js ולא מהקוד שכתבתם. כדי שיהיה לכם קל יותר למצוא את הנתיבים ומספרי השורות התואמים ב-index.ts, firebase deploy יוצרת את functions/lib/index.js.map. אפשר להשתמש במפת המקור הזו בסביבת הפיתוח המשולבת (IDE) המועדפת עליכם או באמצעות מודול צומת.