יסודות TypeScript

מאמר זה מסביר את היסודות של TypeScript.

YouTube Video

הרצת "שלום עולם!"

ראשית, נריץ את הדוגמה הקלאסית של "שלום עולם!" ב-TypeScript תוך שימוש ב-Visual Studio Code.

npm install -g typescript

התקן את typescript באמצעות הפקודה npm.

צור קובץ tsconfig.json.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

צור קובץ .vscode/launch.json כדי לאפשר הרצת הקובץ main.ts ב-Visual Studio Code.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

צור קובץ main.ts שמציג "שלום עולם!". ניתן להריץ אותו ב-Visual Studio Code על ידי לחיצה על מקש F5.

1console.log("Hello World!");

על ידי קביעת תצורה בדרך זו, ניתן להפעיל קבצי TypeScript בתוך VSCode.

סקירה כללית של TypeScript

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

הקלדה סטטית

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

1let message: string = "Hello, TypeScript";
2console.log(message);

קומפילציה

• מכיוון ש-TypeScript אינה יכולה להתבצע ישירות בדפדפן, יש להמיר אותה (לערוך קומפילציה) ל-JavaScript. השתמש ב-tsc (מדרגות TypeScript) כדי להמיר קבצי TS לקבצי JS.

הערות טיפוס (Types) אופציונליות

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

1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

ממשקים (Interfaces)

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

1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

מחלקות

• TypeScript מציעה הרחבות לסינטקס המחלקות של JavaScript ותומכת בירושה, במאפייני גישה (public, private, protected) ובמחלקות מופשטות.

 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

גנריים

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

1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

מערכת אקולוגית

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

כלי פיתוח חזקים

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

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

משתנים ב-TypeScript

הסבר על המושגים הבסיסיים והשימוש במשתנים ב-TypeScript.

הצהרת משתנים

ב-TypeScript, משתנים מוגדרים באמצעות שלוש מילות מפתח: let, const, ו-var. לכל מילת מפתח יש מאפיינים שונים.

דוגמה ל-let:

let תחום הבלוק (תקף רק בתוך סוגריים מסולסלים {}). ניתן להקצות מחדש ערכים מאוחר יותר.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

דוגמה ל-const:

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

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

דוגמה ל-var:

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

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

הערות סוג

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

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

משתנים שלא אותחלו

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

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

תחום המשתנה

let ו-const הם בעלי תחום בלוק, ולכן תקפים רק בתוך אותו הבלוק.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Hoisting של משתנים

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

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• במקרה זה, משתנים שהוצהרו עם var מועלים, והערכים שלהם מוצגים.

1console.log(b); // ReferenceError
2let b = 20;

• משתנים שהוצהרו עם let אינם מועלים, והתוצאה היא שגיאה.

סיכום

להלן סיכום של let, const, ו-var.

• let ניתן להקצאה מחדש ויש לו תחום בלוק.
• const אינו ניתן להקצאה מחדש ויש לו תחום בלוק.
• var ניתן להקצאה מחדש ויש לו תחום פונקציה.
• כולם מאפשרים סימון סוג מפורש להגדרת סוגי משתנים.

תווי בריחה ב-TypeScript

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

לדוגמה, יש להשתמש ב-\n כדי להציג הודעה הכוללת שורה חדשה.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

התחמקות מתווים מיוחדים

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

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

בריחה מתו ה-backslash עצמו

כדי לכלול backslash בתוך מחרוזת, יש לכתוב אותו כ-backslash כפול.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

בריחת Unicode ובריחה הקסדצימלית

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

רצף בריחת Unicode

ניתן לייצג תווי Unicode על ידי ציון מספר הקסדצימלי בן ארבע ספרות אחרי \u.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

בריחה הקסדצימלית

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

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

תבניות מחרוזות ותווי בריחה

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

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

מקרים מיוחדים

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

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

דוגמאות לשימוש מעשי

להלן דוגמה לבניית מחרוזת מורכבת באמצעות תווי בריחה.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

בדוגמה זו, \n משמש לשורה חדשה ו-\t משמש להוספת הזחה. זה הופך את מבנה ה-JSON לקל יותר לקריאה.

סיכום

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

גרסאות TypeScript

בואו נקבל מבט כללי על גרסאות TypeScript כאן.

1. TypeScript 1.0 (2014)

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

2. TypeScript 2.0 (2016)

   Non-nullable Types, Control Flow Analysis, Read-only Properties, ו-סוג Never הוצגו, ושיפרו את הסקת הסוגים.

3. TypeScript 3.0 (2018)

   מערכת סוגים גמישה יותר הוצגה, עם מאפיינים כמו Project References, הרחבות Tuple Types, ושיפורים ב-Rest Parameters.

4. TypeScript 4.0 (2020)

   תכונות כמו Variadic Tuple Types, שיפורים בעורך, הסקת סוגים משופרת, ו-Labelled Tuple Elements נוספו כדי לשפר את חווית הפיתוח.

5. TypeScript 4.1 (2020)

   Template Literal Types הוצגו, מה שהפך את המניפולציה על סוגי המחרוזת לחזקה יותר.

6. TypeScript 4.3 (2021)

   הוספת מילת המפתח Override, שיפורים במשתני גישה בתוך בנאים, ותמיכה משופרת בסוגים עבור WeakMap ו-WeakSet.

7. TypeScript 4.5 (2021)

   הוספו סוג ה-Awaited, ModuleSuffixes, ושיפורים בהתאמה עם מודולים של ECMAScript.

8. TypeScript 5.0 (2023)

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

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

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

YouTube Video