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

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

שלב 1: התקנת Dependencies

נתחיל ביצירת פרויקט חדש והתקנת ה-Dependencies הדרושים:

npm init -y
npm install express
npm i -D typescript tsup @types/express

כעת יש לנו פרויקט בסיסי עם TypeScript, Express.js ו-TSUP.

שלב 2: הגדרת TypeScript

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

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

הגדרות אלו מבטיחות ש-TypeScript יקומפל ל-ES6 ויארגן את הקבצים המוקומפלים בתיקיית dist.

שלב 3: יצירת אפליקציית Express בסיסית

ניצור את התיקייה src שבה נשמור את קבצי המקור שלנו. בתוך התיקייה, ניצור קובץ בשם index.ts שיכיל את הקוד של האפליקציה הבסיסית שלנו עם Express.js:

import express, { Request, Response } from "express";

const app = express();
const port = 3000;

app.get("/", (req: Request, res: Response) => {
  res.send("Hello, TypeScript with Express!");
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

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

שלב 4: הגדרת TSUP לבניית הפרויקט

TSUP הוא כלי יעיל ומהיר לבניית פרויקטים ב-TypeScript. הוא מאפשר לנו לבנות את הקוד שלנו בצורה פשוטה ומהירה. נעדכן את קובץ package.json כדי להוסיף את הסקריפט לבנייה והרצה:

"scripts": {
    "dev": "tsup src/index.ts --watch --onSuccess 'node dist/index.js'",
    "start": "node dist/index.js",
    "build": "tsup src/index.ts"
}

• build: בונה את הקוד באמצעות TSUP ושומר את התוצאות בתיקיית dist.
• start: מריץ את הקוד המוקומפל בתיקיית dist.
• dev: מריץ את הקוד ישירות מ-TypeScript במצב watch לפיתוח.

שלב 5: בנייה והרצה

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

npm run dev

ולבניית האפליקציה והרצתה בסביבת ייצור:

npm run build
npm start

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

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

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

app.get("/user", (req: Request, res: Response) => {
  const user: User = {
    id: 1,
    name: "John Doe",
    email: "john.doe@example.com",
  };
  res.json(user);
});

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

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

מוזמנים להתייעץ איתנו לגבי קורס TypeScript או קורס Node.js אם אתם מעוניינים ללמוד עוד על הנושאים הללו.