TypeScript

התקנה והרצה

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

הכי מהיר: בדפדפן

ב-TypeScript Playground כותבים TypeScript משמאל, ורואים מימין את השגיאות ואת ה-JavaScript שנוצר. מושלם לניסוי מהיר של כל דוגמה בקורס, בלי התקנה.

פרויקט מקומי

mkdir ts-practice
cd ts-practice
npm init -y
npm pkg set type=module
npm install --save-dev typescript
npx tsc --init

tsc --init יוצר קובץ tsconfig.json עם הגדרות. הכי חשובה מביניהן כבר מופעלת: "strict": true. אל תכבו אותה. היא ההבדל בין TypeScript שמוצאת באגים לבין TypeScript שרק מוסיפה עבודה.

שלוש דרכים להריץ

1. Node.js מריץ ישירות

// hello.ts
const name: string = 'עולם';
console.log(`שלום ${name}!`);

node hello.ts

מגרסה 22.18 (ו-23.6 ואילך), Node.js מסיר את הטיפוסים ומריץ. זה מהיר, אבל לא בודק את הטיפוסים. יש גם מגבלה: רק תחביר שאפשר פשוט למחוק. enum, למשל, לא נתמך במצב הזה.

2. tsc: בדיקה (והמרה)

npx tsc --noEmit        # רק בודק טיפוסים, בלי ליצור קבצים
npx tsc                 # בודק וממיר ל-JavaScript (לפי tsconfig)
npx tsc --noEmit --watch   # בודק שוב בכל שמירה

בפרויקט אמיתי תמיד מריצים את הבדיקה, למשל כשלב ב-CI לפני כל מיזוג.

3. כלי build (Vite, Next.js)

בפרויקטי Frontend, הכלי מטפל ב-TypeScript לבד. npm create vite@latest ובוחרים React + TypeScript, וזהו. גם כאן, הכלי רק מסיר טיפוסים, ולכן יש לו script נפרד של בדיקה.

scripts מומלצים

{
  "type": "module",
  "scripts": {
    "dev": "node --watch src/index.ts",
    "typecheck": "tsc --noEmit",
    "build": "tsc"
  }
}

העורך

VS Code כולל תמיכה מלאה ב-TypeScript בלי תוסף: שגיאות בזמן כתיבה, השלמה, מעבר להגדרה (F12) ושינוי שם בכל הפרויקט (F2). רחפו עם העכבר מעל משתנה כדי לראות את הטיפוס שלו. זה הכלי הכי חשוב ללמידה: הרבה פעמים תגלו ש-TypeScript כבר יודעת את הטיפוס בלי שכתבתם אותו.

השגיאה הראשונה שלכם

let count = 5;
count = 'חמש';
// Type 'string' is not assignable to type 'number'.

לא כתבנו : number, ובכל זאת TypeScript הסיקה אותו מהערך ההתחלתי. על זה בשיעור הבא.