איך להתחיל ללמוד TypeScript – מדריך למתחילים

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

JavaScript פותחה במקור כשפת סקריפט פשוטה. טבעה הרפוי והחוסר בתכונות חיוניות של תכנות עצמי (OOP) גורמים לאתגרים מסוימים למפתחים:

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

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

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

מה נכסה:

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

דרישות מוקדמות

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

1. יסודות JavaScript

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

תחביר וסוגי נתונים: להבין איך להכריז על משתנים (let, const, ו־var), לעבוד עם סוגי נתונים בסיסיים (מחרוזות, מספרים, בוליאנים), ולנהל מערכים ואובייקטים.
זרימת שליטה: להיות מוכר עם לולאות (for, while), תנאים (if-else, switch), ואיך הם שולטים בביצוע התוכנית.
פונקציות: ידע כיצד להגדיר ולקרוא לפונקציות, לעבוד עם פרמטרים, להחזיר ערכים, ולהבין מושגים כמו פונקציות חץ וסגירות.
תכנות מונחה עצמים (OOP): למד על יצירה ועבודה עם אובייקטים, מחלקות, והנציחות. תכונות המבוססות על מחלקות של TypeScript בונות במידת רבה על הדגם של JavaScript ב-OOP.
טיפול בשגיאות: הבנה כיצד להשתמש בבלוקי try-catch כדי לטפל בשגיאות בזמן הריצה.

2. HTML ו-CSS בסיסיים

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

HTML: הבנה כיצד לבנות עמודי אינטרנט באמצעות תגים, מאפיינים, ורכיבים.
CSS: ללמוד איך לעצב רכיבים בעזרת בוררים, מאפיינים וערכים. מומחיות במסגרות CSS כמו Bootstrap היא בונוס.

3. מומחיות בכלי פיתוח

עורך קוד כמו Visual Studio Code, שיש בו תמיכה מעולה ב-TypeScript והרחבות.
Node.js ו-npm: להבין איך להגדיר סביבת פיתוח, להריץ JavaScript מחוץ לדפדפן, ולהשתמש ב-npm (Node Package Manager) כדי להתקין תלות.
בקרת גרסאות (Git): ללמוד את היסודות של Git כדי לעקוב אחר שינויים ולשתף פעולה ביעילות בפרויקטי TypeScript.

התחלה – איך להתקין את TypeScript

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

תוכל להתקין את TS בשני אופנים:

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

npm install -g typescript

פקודה זו משתמשת במנהל החבילות של Node.js, npm. זה מתקין את TypeScript באופן גלובלי, והפקודה תהיה זמינה בשורת הפקודה.

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

npm install typescript --save-dev

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

האם תוכל להתקין את TypeScript בקלות כעת? אני מקווה שכן!

איך לארגן את פרוייקטי ה-TypeScript שלך

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

הסיומת .ts מציינת קבצי TypeScript ומכילה קוד המתרגם ל-JavaScript לצורך ביצוע.

TypeScript תומך גם בקבצי .d.ts, שנקראים גם קבצי הגדרת סוגים. קבצים אלו מציעים מידע על סוגים בנוגע לספריות JavaScript חיצוניות או מודולים, מסייעים בבדיקת סוגים והשלמת קוד, ומשפרים את ביצועי הפיתוח. להלן דוגמה למבנה פרויקט TS טוב:

my-ts-project/
├── src/ 
│   ├── components/ 
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   ├── services/ 
│   │   ├── api.ts
│   │   └── authService.ts
│   ├── utils/ 
│   │   ├── helpers.ts 
│   │   └── validators.ts
│   ├── models/ 
│   │   ├── User.ts
│   │   └── Product.ts
│   ├── index.tsx 
│   └── styles/ 
│       ├── global.css
│       └── theme.css
├── public/ 
│   ├── index.html
│   └── assets/ 
│       ├── images/
│       └── fonts/
├── tsconfig.json
└── package.json

בואו נבין מה קורה כאן:

src/: ספריית זו מכילה את כל קוד המקור של הפרויקט.
- components/: מכיל מרכיבי UI ניתנים לשימוש מחדש (לדוגמה, Button, Input, Modal). שימוש ב־.tsx (TypeScript JSX) מאפשר לך לכתוב JSX באופן בטוח מבחינת סוגים.
- services/: מכיל שירותים שמתקשרים עם API חיצוני או מטפלים בלוגיקת היישום (לדוגמה, api.ts לקריאות API, authService.ts לאימות).
- utils/: מכיל פונקציות עזר ומחלקות יוליות למשימות נפוצות (לדוגמה, helpers.ts לעיצוב תאריכים, validators.ts לאימות קלט).
- models/: מגדיר ממשקי TypeScript או מחלקות לייצוג מבני נתונים (לדוגמה, User.ts, Product.ts).
- index.tsx: נקודת הכניסה הראשית של היישום.
- styles/: מכיל קבצי CSS או סגנונות אחרים.
public/: תיקייה זו מכילה קבצים סטטיים שאינם מעובדים על ידי TypeScript (לדוגמה, HTML, תמונות, גופנים).
tsconfig.json: קובץ הקונפיגורציה של TypeScript, המציין אפשרויות קומפיילר.
package.json: קובץ המניפסט של הפרויקט, המפרט תלותים, סקריפטים ומטא-נתונים אחרים של הפרויקט.

הערה מהירה על כללי שמות כדי שתבינו אותם כאן:

השתמשו ב-PascalCase עבור שמות מחלקות (לדוגמה, User, Product).
השתמשו ב-camelCase עבור שמות פונקציות ומשתנים (לדוגמה, getUser, firstName).
השתמש בשמות משמעותיים ותיאוריים עבור קבצים ותיקיות.

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

ארגון תקין של פרוייקטי ה־TS שלך משפר את ניתוח הקוד, הקריאות והשיתוף בזרימות עבודה בפיתוח TypeScript.

איך עבודת טיפוסים עובדת ב־TypeScript

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

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

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

כדי לציין טיפוס ב־TypeScript, שים נקודתיים (:) ואת סוג הנתונים הרצוי אחרי שם המשתנה שלך. הנה דוגמה:

let age: number = 2;

המשתנה לעיל מוגדר עם סוג number. ב־TypeScript, זה אומר שהוא יכול לאחסן מספרים בלבד ושום דבר אחר.

טכניקות טיפוס

ב־TypeScript, ניתן לטיפוס מידע בשני דרכים עיקריות:

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

let age: number = 25;

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

Dynamic Typing: הטיפוס הדינמי ב TypeScript מתייחס למקרים בהם הטיפוס של משתנה נקבע בזמן ריצה. זה יכול לקרות כאשר משתנים מוקצים לסוג any, אשר מאפשר להם להכיל ערכים מסוגים שונים. TypeScript לא מבצע בדיקת סוגים על פעולות הכוללות משתנים עם סוג any.

let value: any;
value = 25; // Number
value = "Hello"; // String

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

עבודה עם ספריות של צד שלישי שחסרות הגדרות סוג.
שימוש בנתונים עם מבנה דינמי (לדוגמה, תגובות JSON מ-APIs עם מבנים לא ידועים).
יצירת דגם מהיר או כאשר מידע על הטיפוס אינו זמין בשלב הפיתוח הראשוני.

סטטי נגד דינמי: טיפוסים ב TypeScript

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

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

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

הסקה טיפוס וסוגי איחוד

הסקת טיפוס

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

לדוגמה:

typescriptCopyEditlet age = 25; // TypeScript מסיק כי 'גיל' הוא מסוג 'מספר'
age = "hello"; // שגיאה: סוג 'מחרוזת' אינו ניתן להקצאה לסוג 'מספר'

בדוגמה זו, משתנה age מאומת באופן אוטומטי כnumber עקב ערך התחלתי שלו, 25. כל ניסיון להקצות מחדש את age לערך של סוג שונה (כמו מחרוזת) יוביל לשגיאת סוג.

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

מתי להשתמש בהשמה סוגית:

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

סוגי איחוד

סוגי האיחוד מאפשרים למשתנה להחזיק ערכים ממספר סוגים שונים. הם מוגדרים על ידי השמת קו־רצועה (|) בין הסוגים. תכונה זו מועילה במיוחד כאשר משתנה עשוי להכיל באופן חוקי יותר מסוג אחד במהלך החיים שלו.

לדוגמה:

typescriptCopyEditlet numOrString: number | string; // 'numOrString' יכול להחזיק באופן בר של דעת את מספר או מחרוזת
numOrString = 25; // תקף
numOrString = "hello"; // תקף
numOrString = true; // שגיאה: הסוג 'boolean' אינו ניתן להשמה לסוג 'number | string'

אפשר גם להגדיר סוגי האיחוד עם יותר משני סוגים אפשריים:

typescriptCopyEditlet multiType: number | string | boolean;
multiType = 42; // תקף
multiType = "TypeScript"; // תקף
multiType = false; // תקף

מתי להשתמש בסוגי האיחוד:

פרמטרים גמישים בפונקציה: כאשר פונקציה יכולה לקבל מספר סוגים של קלט.
```
  typescriptCopyEditfunction printValue(value: string | number) {
    console.log(value);
  }
```
טיפול במבני נתונים מגוונים: כאשר עובדים עם APIים או מקורות נתונים חיצוניים שבהם השדות עשויים להשתנות בסוגם.
משתנים אופציונליים או במצב מרובה: לדוגמה, משתנה שיכול לייצג מצב טעינה בתור בוליאני, שגיאה בתור מחרוזת, או נתונים תקינים בתור אובייקט:
```
  typescriptCopyEditlet status: boolean | string | { success: boolean; data: any };
```

כיצד לטפל באובייקטים, מערכות, וסוגי פונקציות ב TypeScript

כדי לשלט ב TypeScript, עליך להבין את סוגי הנתונים השונים שתומכים ב TypeScript ואיך ומתי להשתמש בהם.

הסוגים הראשיים של סוגי primitive של JavaScript כגון strings, numbers, booleans, ועוד מגדירים את בלוקי הבנייה הבסיסיים של נתונים ב TypeScript. אך בפרט, Objects, Arrays, ו- Functions הם חיוניים לבניית אפליקציות חזקות. באמצעות עם אובייקטים, מערכות ופונקציות, תוכל לטפל בנתונים ולהשתמש בהם ביעילות בפיתוח.

סוגי Object ב TypeScript

סוגי object מייצגים את התבנית ליצירת אובייקטים ב TypeScript. תוכל להשתמש באובייקטים כדי להגדיר את צורתם, דומה לכיצד classes משמשות בתכנות מונחה עצמים (OOP). אך אובייקטים חסרים את ההיבטים ההתנהגותיים והאחסון שכיחים במחלקות.

כדי להגדיר סוג object, ציין באופן ברור את תבנית האובייקט לאחר הנקודתיים (:). לדוגמה:

// התחלת סוג Object

let student: {
    name: string;
    age: number;
    matricNumber: string | number;
 };

// השמת האובייקט עם נתונים אמיתיים

student = {
    name: "Akande"
    age: 21,
    matricNumber: 21/52 + "HP" + 19,
};

שים לב שהמאפיינים מסתיימים בנקודה-פסיק; במקום פסיק , שמסיים אותם באובייקט אמיתי.

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

סוגי מערכים ב TypeScript

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

ב-TS, סוגי מערכים יכולים להיות מוגדרים בשני דרכים:

1. באמצעות ה- `Array<type>` מודל

סינטקס זה משתמש בסוג ה-Generic Array, שבו type מייצג את סוג האלמנטים שהמערך יכול להחזיק.

typescriptCopyEditlet numbers: Array<number> = [1, 2, 3, 4, 5];
let mixedArray: Array<number | string> = [1, 2, 3, 4, 5, "Hello"];

numbers משלם: מערך זה יכול להכיל רק מספרים. ניסיון להוסיף מחרוזת או טיפוס אחר למערך זה יגרום לשגיאת טיפוס.
```
  typescriptCopyEditnumbers.push(6); // תקין
  numbers.push("שלום"); // שגיאה: הטיפוס 'string' אינו ניתן להשוואה לטיפוס 'number'
```

mixedArray דוגמה: מערך זה משתמש בסוג איחוד (number | string), מאפשר לו לאחסן גם מספרים וגם מחרוזות.

  typescriptCopyEditmixedArray.push(42); // חוקי
  mixedArray.push("TypeScript"); // חוקי
  mixedArray.push(true); // שגיאה: הסוג 'boolean' אינו ניתן להשמה לסוג 'number | string'

2. בשימוש במודל `type[]`

התחביר הזה מוסיף סוגריים מרובעים ([]) לסוג האלמנטים שהמערך יכול להחזיק.

typescriptCopyEditconst numbers: number[] = [1, 2, 3, 4, 5];
const mixedArray: (string | number)[] = [1, 2, 3, 4, 5, "Hello"];

numbers דוגמה: דומה לדוגמה של Array<number>, מערך זה יכול להחזיק רק מספרים.

  typescriptCopyEditnumbers[0] = 10; // תקף
  numbers.push("Hi"); // שגיאה: סוג 'string' אינו ניתן להשוות את סוג 'number'

מערךמעורבדוגמה: כמו במערך מערךמעורב הקודם, מערך זה מאפשר הוספת מספרים ומחרוזות, מספק גמישות כאשר סוג הנתונים עשוי להשתנות.
```
  typescriptCopyEditmixedArray[1] = "עולם"; // תקף
  mixedArray.push(true); // שגיאה: סוג 'boolean' אינו יכול להיות מוקצה לסוג 'string | number'
```

איך להשתמש במערכים ב-TS

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

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

typescriptCopyEditconst userIds: number[] = [101, 102, 103];
const productPrices: Array<number> = [29.99, 49.99, 19.99];

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

typescriptCopyEditconst messages: (string | object)[] = [
  "Welcome",
  { type: "error", text: "Something went wrong" },
];

עובר על מערכים:
מערכים ב־TypeScript ניתן להשתמש בהם בלופים עם בטיחות מסוגים מלאה:

typescriptCopyEditconst scores: number[] = [80, 90, 70];
scores.forEach((score) => console.log(score + 5)); // מוסיף 5 לכל ציון

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

typescriptCopyEditfunction getNumbers(): number[] {
  return [1, 2, 3];
}
function printStrings(strings: string[]): void {
  strings.forEach((str) => console.log(str));
}

סוגי פונקציות ב־TypeScript

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

function addition (a: number, b: number): number {
return a + b;
}

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

קריאה לפונקציה עם מחרוזת כארגומנט:

// זה לא יעבוד מכיוון שהוא מצפה למספרים, ואחד הארגומנטים הוא מחרוזת

addition(1, "two");

כתיבה מחדש של הפונקציה כך שתחזיר מחרוזת:

// הפונקציה תחזיר שגיאה מכיוון שהיא מחזירה מחרוזת

function addition (a: number, b: number): string {
    let result = a + b;
    let returnStatement = `Addition of ${a} and ${b} is: ${result}`;
    return returnStatement;
}

נסו את הקוד בעצמכם כדי לראות כיצד עובדות הדוגמאות הללו.

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

כיצד ליצור סוגים מותאמים אישית ב־TypeScript

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

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

המילת מפתח "Type"

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

// תחביר

type TypeAlias = type;

וכאן דוגמה:

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

שים לב שמומלץ להתחיל בסוג מותאם אישית באות ראשונה בגדולה.

מילת המפתח "Type" נהוגה לסוגי יסוד – אך איך ליצור סוג אובייקט מותאם אישית?

כאן נכנסות ממשקים.

ממשקי TypeScript

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

הגדרת ממשק

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

typescriptCopyEditinterface InterfaceName {
  property1: Type;
  property2: Type;
}

דוגמה:

typescriptCopyEditinterface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};

הנה מה קורה בדוגמה זו:

הכרזת ממשק (interface User):
- כאן, אנו מגדירים שרטוט עבור אובייקט User. הוא מפרט שכל אובייקט מסוג User חייב להיות לו את התכונות הבאות:
  - id מסוג number
  - name מסוג string
  - email מסוג string
בשימוש בממשק (const user: User):
אנו מצהירים על אובייקט user מסוג User.
האובייקט חייב להכיל את כל המאפיינים שהוגדרו בממשק User, עם ערכים מהסוגים המצוינים. אם חסר מאפיין או שהסוג שלו אינו תואם, TypeScript יזרוק שגיאת זמן קידום שלב.

לדוגמה:

    typescriptCopyEditconst invalidUser: User = {
      id: 1,
      name: "Alice",
      // שגיאה: המאפיין 'אימייל' חסר בסוג
    };

ואז אתה עשוי לשאול – למה כדאי להשתמש בממשקים?

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

תכונות מתקדמות של ממשקים

מאפיינים אופציונליים: ניתן להגדיר מאפיינים כאופציונליים על ידי הוספת סימן שאלה (?).

 typescriptCopyEditinterface Product {
   id: number;
   name: string;
   description?: string; // מאפיין אופציונלי
 }

 const product: Product = {
   id: 101,
   name: "מחשב נייד",
 }; // תקף, מאחר ו-'description' הוא אופציונלי

נכסים לקריאה בלבד: השתמש ב־readonly כדי למנוע מהנכסים להיות משנים לאחר האתחול.

 typescriptCopyEditinterface Point {
   readonly x: number;
   readonly y: number;
 }

 const point: Point = { x: 10, y: 20 };
 point.x = 15; // שגיאה: לא ניתן להקצות ל־'x' מכיוון שזהו נכס לקריאה בלבד

הרחבת ממשקים: ממשקים יכולים לרשת מאפיינים מממשקים אחרים, מאפשר קומפוזיציה.

 typescriptCopyEditinterface Person {
   name: string;
   age: number;
 }

 interface Employee extends Person {
   employeeId: number;
 }

 const employee: Employee = {
   name: "John",
   age: 30,
   employeeId: 1234,
 };

מתי להשתמש בממשקים

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

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

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

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

גנריקים וסוגי ליטרלי

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

הנה דוגמה לפונקציה גנרית ולממשק גנרי ב- TypeScript:

// ממשק גנרי לתיבה שיכולה להכיל כל ערך 

interface  Box<T> { 
    value: T; 
}

// דוגמאות שימוש

let  numberBox: Box<number> = { value: 10 };
let  stringBox: Box<string> = { value: "TypeScript" };

console.log(numberBox.value); // פלט: 10  
console.log(stringBox.value); // פלט: TypeScript

ניתן להשתמש בגנריקים כאשר אינך בטוח בסוג הנתונים שלך.

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

type Direction = 'up' | 'down' | 'left' | 'right';

משתנה שנוצר עם הסוג הנ"ל יכול להיות מוקצה רק למחרוזות up, down, left ו-right.

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

איך למזג סוגים ב TypeScript

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

1. מיזוג הכרזות באמצעות ממשקים

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

דוגמה:

typescriptCopyEditinterface User {
  id: number;
  name: string;
}

interface User {
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};

איך זה עובד:

הממשק User מוגדר פעמיים, כל פעם עם נכסים שונים.

טיפוססקריפט ממזהה אוטומטית את ההכרזות הללו לממשק יחיד:

  typescriptCopyEditinterface User {
    id: number;
    name: string;
    email: string;
  }

כאשר יוצרים את אובייקט ה־user, יש להכיל את כל המאפיינים מהממשק הממוזג. אם חסר כל מאפיין, טיפוססקריפט יעלה שגיאה.

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

2. מיזוג ממשקים באמצעות מילת המפתח `extends`

מילת המפתח extends מאפשרת לממשק אחד להורית מאפיינים ושיטות מממשק אחר, יוצרת ממשק חדש שמשלב את המאפיינים משניהם.

דוגמה:

typescriptCopyEditinterface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 101,
};

איך זה עובד:

הממשק Person מגדיר שני מאפיינים: name ו־age.
הממשק Employee משתמש במילת המפתח extends כדי לירש את המאפיינים מ־Person.
הממשק Employee מוסיף גם מאפיין חדש, employeeId.
הפריט employee צריך לכלול את כל המאפיינים מ־Person ו־Employee.

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

3. מיזוג סוגים באמצעות המפעיל `&`

המפעיל &, הידוע גם כסוג האיחוד, מאפשר לשלב מספר סוגים לסוג אחד. הסוג שתוצאתו כולל את כל המאפיינים והשיטות מכל סוג.

דוגמה:

typescriptCopyEdittype Address = {
  city: string;
  country: string;
};

type ContactInfo = {
  email: string;
  phone: string;
};

type EmployeeDetails = Address & ContactInfo;

const employee: EmployeeDetails = {
  city: "New York",
  country: "USA",
  email: "[email protected]",
  phone: "123-456-7890",
};

איך זה עובד:

Address ו־ContactInfo הם שני סוגים נפרדים.
פרטיעובד הוא סוג אינטרסקציה שנוצר באמצעות כתובת & מידעליצירתקשר.
האובייקט עובד צריך לכלול את כל המאפיינים משני הסוגים כתובת ו־מידעליצירתקשר. החסרות או המאפיינים שאינם מסוגלים יגרמו לשגיאת TypeScript.

סוגי אינטרסקציה שימושיים כאשר נדרש לשלב סוגים שאינם קשורים או ליצירת סוגים מרכבים למטרות שימוש ספציפיות, כגון תגובות API שמשלבות מבני נתונים שונים.

מתי להשתמש בכל אחת מהגישות הללו

מיזוג הכרזות: השתמש כאשר ברצונך להרחיב או להוסיף לממשק קיים, במיוחד בספריות של צד שלישי או במקורות קוד משותפים.
מרחיב מילתמפתח: השתמש במקרים של יחסים היררכיים שבהם ניתן להתמחות בממשק בסיס לסוגים ספציפיים יותר.
סוגי איחוד (&): השתמש כאשר נדרש לשלב סוגים מרובים שאינם קשורים לסוג אחד למטרות שימוש ספציפיות.

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

איחוד והמרות ב TypeScript

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

כדי להריץ קבצי TypeScript, tsc הוא כלי העבודה שלך. ניתן להתקין את tsc באמצעות npm ולאחר מכן להמיר את קבצי ה- ts שלך לקבצי js. כדי להשתמש ב- tsc, יש לציין את שם הקובץ של TypeScript לפני הפקודה tsc. לדוגמה, אם יש לך קובץ בשם app.ts, תוכל להפעיל אותו על ידי הקלדת:

tsc app.ts

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

בניית קוד טוב יותר עם TypeScript

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

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

המשיכו לדחוף את הגבולות שלכם ולצלול עומק יותר לעולם של TypeScript. 😉

מה נכסה:

דרישות מוקדמות

1. יסודות JavaScript

2. HTML ו-CSS בסיסיים

3. מומחיות בכלי פיתוח

התחלה – איך להתקין את TypeScript

איך לארגן את פרוייקטי ה-TypeScript שלך

איך עבודת טיפוסים עובדת ב־TypeScript

טכניקות טיפוס

סטטי נגד דינמי: טיפוסים ב TypeScript

הסקה טיפוס וסוגי איחוד

הסקת טיפוס

מתי להשתמש בהשמה סוגית:

סוגי איחוד

מתי להשתמש בסוגי האיחוד:

כיצד לטפל באובייקטים, מערכות, וסוגי פונקציות ב TypeScript

סוגי Object ב TypeScript

סוגי מערכים ב TypeScript

1. באמצעות ה- Array<type> מודל

2. בשימוש במודל type[]

איך להשתמש במערכים ב-TS

סוגי פונקציות ב־TypeScript

כיצד ליצור סוגים מותאמים אישית ב־TypeScript

המילת מפתח "Type"

ממשקי TypeScript

הגדרת ממשק

דוגמה:

תכונות מתקדמות של ממשקים

מתי להשתמש בממשקים

גנריקים וסוגי ליטרלי

איך למזג סוגים ב TypeScript

1. מיזוג הכרזות באמצעות ממשקים

דוגמה:

איך זה עובד:

2. מיזוג ממשקים באמצעות מילת המפתח extends

דוגמה:

איך זה עובד:

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

3. מיזוג סוגים באמצעות המפעיל &

דוגמה:

איך זה עובד:

סוגי אינטרסקציה שימושיים כאשר נדרש לשלב סוגים שאינם קשורים או ליצירת סוגים מרכבים למטרות שימוש ספציפיות, כגון תגובות API שמשלבות מבני נתונים שונים.

מתי להשתמש בכל אחת מהגישות הללו

איחוד והמרות ב TypeScript

בניית קוד טוב יותר עם TypeScript

1. באמצעות ה- `Array<type>` מודל

2. בשימוש במודל `type[]`

2. מיזוג ממשקים באמצעות מילת המפתח `extends`

3. מיזוג סוגים באמצעות המפעיל `&`