הגדרת TypeScript עם Visual Studio Code

Visual Studio Code (VSCode) הוא עורך קוד חזק ופופולרי המספק תמיכה מצוינת לפיתוח TypeScript. מדריך זה ידריך אותך לאורך השלבים להגדרת TypeScript ב- VSCode, ויבטיח שיש לך את כל מה שאתה צריך כדי להתחיל קידוד ביעילות.

התקנת Visual Studio Code

אם עדיין לא התקנת Visual Studio Code, בצע את השלבים הבאים:

1. עבור אל אתר VSCode הרשמי.
2. הורד את תוכנית ההתקנה עבור מערכת ההפעלה שלך.
3. הפעל את תוכנית ההתקנה ופעל לפי ההוראות שעל המסך כדי להשלים את ההתקנה.

התקנת Node.js ו-npm

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

1. בקר באתר הרשמי של Node.js.
2. הורד והתקן את גרסת ה-LTS של Node.js, הכוללת npm.
3. אמת את ההתקנה על ידי פתיחת מסוף והפעלת node -v ו-npm -v כדי לבדוק את הגרסאות של Node.js ו-npm.

התקנת TypeScript

עם Node.js ו-npm מותקנים, כעת תוכל להתקין את TypeScript באופן גלובלי. פתח מסוף והפעל את הפקודה הבאה:

npm install -g typescript

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

הגדרת פרויקט TypeScript

כדי להתחיל פרויקט TypeScript חדש, בצע את השלבים הבאים:

1. צור ספרייה חדשה עבור הפרויקט שלך ונווט אליה:

mkdir my-typescript-project
cd my-typescript-project

1. אתחול פרויקט npm חדש:

npm init -y

1. התקן את TypeScript כתלות בפיתוח:

npm install --save-dev typescript

1. צור קובץ תצורה של TypeScript:

npx tsc --init

פקודה זו יוצרת קובץ tsconfig.json בספריית הפרויקט שלך, המכילה הגדרות תצורה עבור מהדר TypeScript.

הגדרת VSCode עבור TypeScript

VSCode מגיע עם תמיכה מובנית ב-TypeScript, אבל אתה יכול לשפר עוד יותר את חווית הפיתוח שלך על ידי הגדרת העורך:

פתיחת הפרויקט שלך

פתח את פרויקט TypeScript שלך ב- VSCode:

1. הפעל את VSCode.
2. בחר קובץ > Open Folder... ובחר את ספריית הפרויקט שלך.

התקנת הרחבות TypeScript

בעוד VSCode מספקת תמיכה מצוינת ב-TypeScript מהקופסה, אתה יכול להתקין הרחבות נוספות לפונקציונליות משופרת:

• הרחבת TypeScript: מספקת תמיכה בשפת TypeScript ותכונות כמו IntelliSense, ניווט קוד ועוד.
• יפה יותר: הרחבה לעיצוב קוד, המבטיחה סגנון קוד עקבי.

הגדרת מהדר TypeScript

פתח את הקובץ tsconfig.json כדי להגדיר את הגדרות המהדר של TypeScript. להלן תצורה לדוגמה:

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

תצורה זו מגדירה את גרסת היעד של ECMAScript ל-ES6, מציינת את פורמט מודול CommonJS, מאפשרת בדיקת סוגים קפדנית ומגדירה את ספריית הפלט ל-./dist. זה כולל גם מפות מקור לניפוי באגים קל יותר.

כתיבה והרצה של קוד TypeScript

צור קובץ TypeScript חדש בספריית src:

mkdir src
touch src/index.ts

הוסף קצת קוד TypeScript ל-index.ts:

const message: string = "Hello, TypeScript!";
console.log(message);

כדי להרכיב את קוד TypeScript שלך, הרץ:

npx tsc

פקודה זו מרכיבה את קובצי ה-TypeScript שלך ומוציאה את קובצי ה-JavaScript לספריית dist.

כדי להפעיל את קוד ה-JavaScript שהורכב, השתמש ב:

node dist/index.js

מַסְקָנָה

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