מה זה TypeScript? מדריך TypeScript למתחילים עם דוגמאות

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

הנה תוכנית TypeScript קטנה. לחצו על Run.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

פלט:

Ada is 36 years old
82.33333333333333

חוץ מהחלקים שאחרי הנקודתיים (: string, : User, : number[]) ומה-interface, זה JavaScript. התוספות האלה אומרות לקומפיילר מה כל ערך רשאי להיות. שימו לב של-total אין הערת טיפוס: TypeScript מבינה לבד שזה מספר. רוב קוד ה-TypeScript מסמן טיפוסים בגבולות של פונקציות ונותן לקומפיילר להסיק את השאר.

מה בודק הטיפוסים תופס

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

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

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

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

כל שגיאה מציינת את הקובץ, את השורה והעמודה, קוד שגיאה (TS2322) ומה לא בסדר. ב-JavaScript רגיל שתי השורות היו רצות, והשנייה הייתה מדפיסה Linus is undefined years old בלי שום אזהרה. בעורך כמו VS Code אותן שגיאות מופיעות כקו תחתון אדום בזמן ההקלדה, יחד עם השלמה אוטומטית שיודעת של-user יש בדיוק name ו-age.

באגים נפוצים שבודק הטיפוסים תופס:

• שם של property או של מתודה עם שגיאת כתיב (user.nmae, list.lenght).
• קריאה לפונקציה עם מעט מדי או יותר מדי ארגומנטים, או עם ארגומנטים מהטיפוס הלא נכון.
• שימוש בערך שעלול להיות null או undefined בלי לבדוק אותו קודם.
• שכחה לטפל באחד המקרים של union כמו "loading" | "done" | "error", כשהקוד משתמש בבדיקה ממצה.
• קוד שנשבר כשפונקציה שהוא תלוי בה משנה את החתימה שלה.

הטיפוסים נעלמים בזמן ריצה

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

הקלט הזה:

function double(n: number): number {
    return n * 2;
}

הופך לפלט הזה:

function double(n) {
    return n * 2;
}

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

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

פלט:

string
thirty-six1

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

מי יצר את TypeScript ולמה

TypeScript נוצרה ב-Microsoft, ואת התכנון הוביל Anders Hejlsberg (מי שתכנן את C#). היא שוחררה לציבור באוקטובר 2012 כגרסה 0.8, וגרסה 1.0 הגיעה באפריל 2014. היא קוד פתוח ברישיון Apache 2.0 ומפותחת ב-GitHub. לפי הספירה של GitHub של תורמים חודשיים, TypeScript הפכה באוגוסט 2025 לשפה הנפוצה ביותר ב-GitHub, לפני Python ו-JavaScript.

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

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

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

למה משתמשים ב-TypeScript? Frontend ו-backend

משתמשים ב-TypeScript לאותה תוכנה שכותבים ב-JavaScript, גם ב-frontend וגם ב-backend. מכיוון שהפלט הוא JavaScript, TypeScript הולכת לכל מקום ש-JavaScript הולכת אליו:

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

איך קוד TypeScript הופך ל-JavaScript

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

1. בדיקת טיפוסים. רק הקומפיילר של TypeScript עושה את זה, בדרך כלל בתור הפקודה tsc (הפקודה deno check של Deno מריצה עותק של אותו קומפיילר). הוא קורא את קובצי ה-.ts שלכם, מדווח על שגיאות, וכברירת מחדל גם כותב קובצי .js.
2. הסרת הטיפוסים. tsc יכול לעשות את זה, וגם כלים מהירים יותר שמדלגים לגמרי על בדיקת הטיפוסים: esbuild, SWC, Babel, וה-type stripping שמובנה ב-Node.js, ב-Deno וב-Bun.

הגדרה נפוצה משתמשת בכלי מהיר כדי להריץ את הקוד, וב-tsc --noEmit (רק בדיקה, בלי לכתוב כלום) בעורך וב-CI. להתקנת tsc ולהרצת קובץ .ts יש לכל אחד עמוד משלו בפרק הזה.

היכולות המרכזיות בדוגמה אחת

TypeScript של יום יום משתמשת בקבוצה קטנה של יכולות. הבלוק הזה מרכז את העיקריות שבהן:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

פלט:

Ada ada@example.com
Ada can log in
Linus is banned

• הערות טיפוסים (name: string) מציינות מה מכיל משתנה, פרמטר, property או ערך החזרה.
• הסקת טיפוסים משלימה את הטיפוסים שלא כתבתם: account מקבל את הטיפוס שלו ממה ש-first מחזירה.
• Interfaces ו-type aliases (interface Account, type Status) נותנים שם למבנה של הנתונים שלכם.
• טיפוסי union ("active" | "banned", T | undefined) מתארים ערך שהוא אחד מכמה דברים.
• Narrowing: אחרי בדיקה כמו account !== undefined, הקומפיילר יודע איזה מקרה חל בתוך הבלוק.
• Properties אופציונליים (email?: string) יכולים להיות חסרים, ולכן הטיפוס שלהם כולל undefined.
• Generics (first<T>) מאפשרים לפונקציה או לטיפוס אחד לעבוד עם הרבה טיפוסים ולשמור על הקשר ביניהם: נכנס מערך של Account, יוצא Account.

צריך ללמוד JavaScript קודם?

זה עוזר, אבל אפשר ללמוד את שתיהן במקביל. כל מה שקובע איך קוד TypeScript מתנהג בזמן ריצה (משתנים, פונקציות, אובייקטים, מערכים, promises, מחלקות) הוא JavaScript, ו-TypeScript מוסיפה שכבה שמתארת את הערכים האלה. אם אתם כבר יודעים JavaScript, החומר החדש הוא מערכת הטיפוסים: הערות טיפוסים, interfaces, unions, generics ו-narrowing. אם שתיהן חדשות לכם, התחילו מהבסיס של ערכים ופונקציות ב-JavaScript, והוסיפו טיפוסים תוך כדי; הודעות השגיאה של הקומפיילר הן מורה טוב, כי הן מצביעות על השורה המדויקת שבה ערך משמש בצורה לא נכונה.

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