הידור TypeScript הסבר כיצד להדר ולהריץ קוד

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

הבנת הידור TypeScript

קוד TypeScript אינו מבוצע ישירות על ידי דפדפנים או Node.js. במקום זאת, יש להרכיב אותו לתוך JavaScript. מהדר TypeScript, `tsc`, מבצע משימה זו. התהליך כולל המרת קבצי TypeScript (`.ts`) לקבצי JavaScript (`.js`) שניתן להפעיל בכל סביבת JavaScript.

הגדרת סביבת TypeScript שלך

לפני שתוכל להרכיב קוד TypeScript, ודא שהתקנת את Node.js ו-npm. אתה יכול להתקין את TypeScript באופן גלובלי באמצעות npm:

npm install -g typescript

פקודה זו מתקינה את מהדר TypeScript (`tsc`) באופן גלובלי, מה שהופך אותו לנגיש מכל מקום במערכת שלך.

קומפילציה של קוד TypeScript

כדי להרכיב קובץ TypeScript, נווט אל ספריית הפרויקט שלך בטרמינל והשתמש בפקודה `tsc` ואחריה שם הקובץ:

tsc filename.ts

החלף את `filename.ts` בשם של קובץ ה-TypeScript שלך. פקודה זו מרכיבה את קוד TypeScript לקובץ JavaScript עם אותו שם אך עם סיומת `.js`.

שימוש בקובץ תצורה של TypeScript

קובץ `tsconfig.json` משמש כדי להגדיר את אפשרויות המהדר TypeScript והגדרות הפרויקט. אתה יכול ליצור קובץ זה באמצעות:

npx tsc --init

הנה דוגמה לקובץ `tsconfig.json` בסיסי:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

תצורה זו מציינת ש-TypeScript צריך להדר קוד ל-ECMAScript 6 (`es6`), להשתמש במודולים של CommonJS, לאפשר בדיקת סוגים קפדנית, להוציא קבצים מהודרים לספריית `dist`, וליצור מפות מקור לאיתור באגים.

קומפילציה של כל הקבצים בפרויקט

עם קובץ `tsconfig.json` במקום, אתה יכול להרכיב את כל קבצי TypeScript בפרויקט שלך על ידי הפעלת:

tsc

פקודה זו קוראת את הקובץ `tsconfig.json` ומרכיבה את כל קבצי TypeScript שצוינו בתצורה.

הפעלת קוד JavaScript מהול

לאחר הידור של קוד TypeScript לתוך JavaScript, אתה יכול להפעיל אותו באמצעות Node.js או לכלול אותו בפרויקט אינטרנט. כדי להפעיל קובץ JavaScript עם Node.js, השתמש ב:

node dist/filename.js

החלף את `filename.js` בשם של קובץ ה-JavaScript המקומפל שלך שנמצא בספריית `dist`.

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

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

  • שגיאות תחביר: בדוק את קוד ה-TypeScript שלך עבור בעיות תחביר. המהדר יספק הודעות שגיאה המציינות היכן נמצאות הבעיות.
  • שגיאות הקלדה: ודא שהקוד שלך תואם למערכת הטיפוסים של TypeScript. סקור את הערות הסוג וודא שהן מוגדרות כהלכה.
  • בעיות תצורה: ודא שקובץ `tsconfig.json` שלך מוגדר כהלכה וממוקם בשורש ספריית הפרויקט שלך.

מַסְקָנָה

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