כיצד לאכוף אבטחת סוגים ב-FormData עם TypeScript

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

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

לאחר שזה קרה, חיפשתי דרך להבטיח ש-TypeScript לא יאפשר את השגיאות הללו.

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

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

כדי להפיק את המרב מהמאמר הזה, עליך להבין באופן בסיסי את הדברים הבאים:

1. תכנות JavaScript

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

3. ממשק ה-FormData

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

שלב 1: הגדר את המפתחות המורשים שלך

הדרך הישנה

הדרך ברירת המחדל להוסיף נתונים עם FormData היא לעשות זאת ידנית, עם מחרוזות פשוטות:

const payload = new FormData();

payload.append("id", "1122");
payload.append("name", "Clark Kent");

payload.append("agge", "36"); // טעות בהקלדה במפתח מותרת

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

הדרך הטובה יותר

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

interface MyAllowedData {
    id: number;
    name: string;
    age: number;
}

כחלופה, אתה יכול להגדיר אותם עם סוגים:

type MyAllowedData = {
    id: number;
    name: string;
    age: number;
}

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

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

type MyFormDataKeys = keyof MyAllowedData
// זה אותו דבר כמו `type MyFormDataKeys = 'id' | 'name' | 'age'`

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

שלב 2: צור פונקציית עזר להוספה

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

function appendToFormData (formData: FormData, key: MyFormDataKeys, value: string) {
  formData.append(key, value);
};

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

• הארגומנט הראשון, formData, הוא מופע של אובייקט FormData. כאן יתווספו זוגות מפתח/ערך לפני שיישלחו בבקשה ל-API.

• הארגומנט השני, key, הוא שם המפתח של השדה שברצונך להוסיף. סוגו הוא MyFormDataKeys, סוג האיחוד שיצרנו כדי להבטיח שרק המפתחות שהגדרנו יתווספו ל-FormData.

• הארגומנט השלישי הוא מחרוזת value המייצגת את הערך שיתווסף עם המפתח.

שימו לב ש-FormData מקבלת רק את string ו Blob סוגים כערכים בכל זוג מפתח/ערך. במדריך זה, אנו עובדים רק עם ערכי מיתר – אך זכרו שניתן להשתמש בערכי blob כדי להוסיף קבצים לבקשות API.

עכשיו, בואו נבחן את הפונקציה:

const payload = new FormData();

appendToFormData(payload, "id", "19282"); // ✅ מותר
appendToFormData(payload, "name", "Lenny Brown"); // ✅ מותר
appendToFormData(payload, "age", "20"); // ✅ מותר

appendToFormData(payload, "someOtherKey", "89"); // ❌ שגיאת TypeScript: לא ניתן להקצות ארגומנט מסוג 'someOtherKey'.

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

עכשיו נצטרף את השדות שלנו ל-FormData לפני שנשלח אותם ל-API.

const handleSubmitForm = () => {
  const payload = new FormData();
   appendToFormData(payload, "id", "19282");
   appendToFormData(payload, "name", "Lenny Brown");
   appendToFormData(payload, "age", "20");

  // שלח את המטען דרך ה-API
  fetch("/api/submit", { method: "POST", body: payload });
};

מצרפים שדות מאובייקט

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

const handleSubmitForm = () => {
  // כל השדות שלכם באובייקט
  const formValues: MyAllowedData = {
    id: 1123,
    name: 'John Doe',
    age: 56
  }
  const payload = new FormData();

  Object.entries(formValues).forEach(([key, value]) => {
    appendToFormData(payload, key as MyFormDataKeys, `${value}`); // השתמשו ב-literals תבנית כדי להעביר ערך
  });

  // שלח את המטען דרך ה-API
  fetch("/api/submit", { method: "POST", body: payload });
};

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

מסקנה

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

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

תודה על הקריאה!