5.1 הקדמה לטייפסקריפט תרגול

תרגול - הקדמה לטייפסקריפט¶

תרגיל 1 - הקמת פרויקט טייפסקריפט¶

הקימו פרויקט טייפסקריפט מאפס:

א. צרו תיקיה חדשה, הריצו npm init -y ואז התקינו טייפסקריפט.

ב. צרו קובץ tsconfig.json עם ההגדרות הבאות:
- target: ES2020
- module: ESNext
- strict: true
- outDir: dist
- rootDir: src

ג. צרו תיקיית src ובתוכה קובץ index.ts שמדפיס "Hello from TypeScript!".

ד. קמפלו עם npx tsc והריצו את הפלט עם node dist/index.js.

תרגיל 2 - הוספת טיפוסים בסיסיים¶

הוסיפו type annotations לכל המשתנים הבאים:

let firstName = "Alice";
let lastName = "Smith";
let age = 25;
let isLoggedIn = true;
let score = 98.5;
let greeting = `Hello, ${firstName}!`;

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

firstName = 42;       // should this work?
age = "twenty-five";  // should this work?
isLoggedIn = 1;       // should this work?

תרגיל 3 - הסקת טיפוסים¶

לכל אחד מהמקרים הבאים, ענו: מה הטיפוס שטייפסקריפט תסיק? ואז בדקו (ב-IDE, רחפו עם העכבר מעל המשתנה).

let a = 42;
let b = "hello";
let c = true;
let d = [1, 2, 3];
let e = { name: "Alice", age: 30 };
let f = null;
let g = undefined;
let h = Math.random() > 0.5 ? "yes" : "no";
let i = Math.random() > 0.5 ? 42 : "hello";

שאלה: באילו מקרים הטיפוס שטייפסקריפט מסיקה הוא לא מה שציפיתם?

תרגיל 4 - תרגום מפייתון לטייפסקריפט¶

תרגמו את הקוד הבא מפייתון לטייפסקריפט. הוסיפו type annotations לכל הפרמטרים וערכי החזרה:

def calculate_area(width: float, height: float) -> float:
    return width * height

def format_name(first: str, last: str) -> str:
    return f"{first} {last}"

def is_adult(age: int) -> bool:
    return age >= 18

def describe_person(name: str, age: int, city: str = "Unknown") -> str:
    return f"{name} is {age} years old and lives in {city}"

area = calculate_area(5.0, 3.0)
full_name = format_name("Alice", "Smith")
adult = is_adult(20)
description = describe_person("Bob", 25, "Tel Aviv")
description2 = describe_person("Charlie", 30)

print(area)
print(full_name)
print(adult)
print(description)
print(description2)

תרגיל 5 - זיהוי שגיאות¶

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

let username: string = "Alice";
let userAge: number = "25";
let isActive: boolean = "true";

function multiply(a: number, b: number): number {
    return a + " x " + b;
}

function getGreeting(name: string): string {
    if (name) {
        return "Hello, " + name;
    }
}

let numbers: number[] = [1, 2, "3", 4, 5];

let result: string = multiply(5, 3);

תרגיל 6 - tsconfig.json¶

א. מה קורה אם מכבים את strict ומשאירים את הקוד הבא? האם יש שגיאה?

function greet(name) {
    console.log("Hello, " + name);
}

let value = null;
console.log(value.toString());

ב. מה קורה אם מפעילים את strict? אילו שגיאות צצות?

ג. הוסיפו את התיקונים הנדרשים כדי שהקוד יעבוד עם strict mode.

תרגיל 7 - הרצה עם tsx¶

א. התקינו את tsx בפרויקט שלכם: npm install -D tsx.

ב. צרו קובץ playground.ts עם כמה פונקציות פשוטות (עם טיפוסים) והריצו אותו ישירות עם npx tsx playground.ts.

ג. השוו את התהליך: כמה צעדים צריך עם tsc + node לעומת tsx?

תרגיל 8 - השוואת JS לעומת TS¶

כתבו את הפונקציה הבאה פעם אחת ב-JS רגיל ופעם אחת ב-TS:

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

דוגמה:

createProfile("Alice", 30, ["reading", "coding"])
// returns:
// {
//   name: "Alice",
//   age: 30,
//   hobbies: ["reading", "coding"],
//   summary: "Alice is 30 years old and enjoys reading, coding"
// }

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

שאלות¶

מה ההבדל בין טייפסקריפט לג׳אווהסקריפט?
האם טייפסקריפט רצה ישירות בדפדפן? למה?
מה תפקיד הקומפיילר tsc?
למה חשוב להפעיל strict mode?
מה ההבדל בין type hints בפייתון לטיפוסים בטייפסקריפט?
מה זה type inference? תנו דוגמה.
מתי כן צריך לכתוב type annotation ומתי אפשר לסמוך על הסקה?