TypeScript ו-tsconfig.json

מאמר זה מסביר על TypeScript ועל tsconfig.json.

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

YouTube Video

TypeScript ו-tsconfig.json

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

מדוע אנו צריכים את TypeScript?

ראשית, הסיבה המרכזית להשתמש ב-TypeScript היא 'היכולת לאתר טעויות לפני ההרצה.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

קוד זה לא יגרום לשגיאה ב-JavaScript עד לזמן הריצה, אך ב-TypeScript הוא יגרום לשגיאת טיפוס בזמן הידור (compile time).

גילוי מוקדם זה משפר מאוד את יעילות ואיכות הפיתוח.

איך מפעילים TypeScript?

בעיקרון, לא ניתן להריץ TypeScript כפי שהוא. יש להמיר אותו ל-JavaScript באמצעות tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init

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

מה תפקידו של tsconfig.json?

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

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• עם הגדרות אלו בלבד, ניתן לבצע פיתוח TypeScript מודרני ובטוח.

target: גרסת ה-JavaScript שתרצה להפיק

target קובע את רמת התקן של קוד ה-JavaScript שיווצר.

1"target": "ES2020"

בעזרת הגדרה זו, TypeScript יפלט קוד JavaScript ברמה של ES2020. לסביבות ישנות בחר ES5; לסביבות עדכניות בלבד, בחר ES2022 וכן הלאה.

בעת בחירת ESNext

1"target": "ESNext"

• ESNext מורה ל-TypeScript להפיק קוד JavaScript בסינטקס העדכני ביותר שקיים. TypeScript אינו מתרגם את הסינטקס, אלא משאיר זאת לטיפול סביבת הריצה כגון Node.js או דפדפנים.

• לכן, ESNext מתאים כשמטרגטים רק Node.js עדכני, או כשמשתמשים בכלי כמו Babel או באנדלר שמטפל בתרגום בנפרד. מהצד השני, אם סביבת הריצה לא תומכת בסינטקס העדכני, זה עלול לגרום לשגיאות בזמן ריצה – לכן יש להיזהר.

module: הגדרת פורמט המודול

module קובע את פורמט המודולים.

1"module": "ESNext"

• ESNext הוא הסטנדרט בפיתוח Frontend ובסביבות Node.js מודרניות.
• בחר "CommonJS" רק אם יש לך צורך ב-CommonJS.

strict: מקסימום בדיקת טיפוסים

strict הוא מתג שמגביר את בטיחות הקוד ב-TypeScript.

1"strict": true

• הפעלת אפשרות זו תאתר בצורה יסודית טיפוסים מעורפלים ושגיאות אפשריות.

מצב strict ו-any מוסתר

כאשר מפעילים strict, TypeScript מתייחס למשתנים שלא ניתן להסיק מהם טיפוס כסוג של שגיאה.

1function printValue(value) {
2	console.log(value);
3}

• למשתנה זה, value, אין מידע טיפוס בהצהרה, ולכן TypeScript לא ידעה מה הטיפוס שלו. כתוצאה מכך, any משויך אוטומטית – דבר שיגרום לאזהרה (או שגיאה) במצב strict.

1function printValue(value: number) {
2	console.log(value);
3}

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

include/exclude: שליטה באילו קבצים לקמפל

בקובץ tsconfig.json ניתן לבחור אילו קבצים יש לכלול ו-אילו קבצים יש להחריג מהידור.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• כך, רק קבצים בתיקיית src ינוהלו על ידי TypeScript.
• תיקיית node_modules שהוגדרה תחת exclude לא תקומפל, גם אם היא נמצאת בתוך נתיב הכלול תחת include.

outDir: הגדרת ספריית פלט

הגדר את outDir כדי לשלוט על מיקום קבצי הפלט של הבנייה.

1"outDir": "dist"

• כך, כל תוצאות הקימפול יופקו לתיקיית dist. בפועל, הפרדה בין קוד המקור לקוד המהודר היא דבר סטנדרטי.

rootDir: הגדרת תיקיית קוד המקור

rootDir מגדיר את התיקייה ש-TypeScript מתייחסת אליה כשורש קוד המקור.

1"rootDir": "src"

• הגדרה זו מאפשרת ל-TypeScript לשמר את מבנה התיקיות לפי src גם בקבצי הפלט. למשל, src/index.ts יהפוך ל-dist/index.js.

• המבנה של התיקייה תחת rootDir ישוכפל בתוך outDir.

esModuleInterop: גישור בין CommonJS ל-ES Modules

כעת נבחן את esModuleInterop.

1"esModuleInterop": true

• כאשר אפשרות זו מופעלת, ניתן להשתמש בצורה בטוחה במודולי CommonJS עם תחביר import.

1import fs from "fs";

• הגדרה זו היא כמעט הכרחית כאשר עובדים עם Node.js.

noImplicitAny: מניעת טיפוס 'any' אוטומטי

חשוב גם לחזק את בדיקות הטיפוסים דרך tsconfig.json.

1"noImplicitAny": true

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

הגדרות לאיתור קוד שלא נעשה בו שימוש

הגדרות שמסייעות לאיתור קוד לא מנוצל תורמות גם לשיפור תחזוקת הפרויקט.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• בזכות זאת, משתנים וארגומנטים מיותרים יסומנו מיידית עם אזהרות.

lib: הגדרת ה-API הבנויים שזמינים לשימוש

lib היא הגדרה שמציינת אילו APIs סטנדרטיים TypeScript מניח שקיימים.

1"lib": ["ES2020", "DOM"]

• בהגדרה זו, הטיפוסים הבאים יעמדו לרשותך:. עם ES2020, יעמדו לרשותך תכונות מודרניות כמו Promise, Map ו-Set. עם DOM, יהיו זמינות פונקציות דפדפן כגון document, window ו-HTMLElement.

בפרונטאנד יש לכלול DOM; לפרויקטים של Node.js בלבד, הוצא את DOM כדי למנוע הכללת טיפוסים גלובליים מיותרים.

moduleResolution: כללי חיפוש מודולים

moduleResolution קובע איך מודולים שמופיעים ב-import יטופלו/יימצאו.

1"moduleResolution": "Node"

שתי האפשרויות העיקריות הן:.

• אם בוחרים ב-Node, יחולו הכללים של Node.js למציאת מודולים.
• Classic הוא השיטה הישנה, שייחודית ל-TypeScript, אך היום כמעט ולא משתמשים בה.

בסביבות שעובדות עם Node.js או בלר, מומלץ להגדיר בבירור את Node.

tsconfig.json מינימלי מוכן לפרודקשן

על פי מה שלמדנו, כך ייראה tsconfig.json מינימלי שמוכן לפרודקשן:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

הגדרה זו מספקת בסיס בטוח לפרויקטים של פרונטאנד ושל Node.js כאחד.

סיכום: tsconfig.json הוא 'ספר חוקים'

tsconfig.json אינו רק קובץ הגדרות, אלא 'ספר חוקים' שמופעל על כל הפרויקט. באמצעות tsconfig.json, מוגדרות בצורה ברורה מדיניות חשובה כמו הבאות:.

• רמת בדיקת הטיפוסים.
• קונבנציות קידוד לצוות שלך.
• מניעת באגים עתידיים.

על ידי הבנת tsconfig.json, תוכל לא רק לכתוב TypeScript, אלא גם לתכנן פרויקטים לשימוש בטוח בשפה.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video