javascript - JSDoc: המאפיין 'value' לא קיים בסוג 'EventTarget'


אני משתמש ב-JavaScript רגיל עם TypeScript כקדם-מעבד בשילוב עם JSDoc.
זה עובד די בצורה חלקה, במיוחד בצד השרת (כאשר משתמשים ב-NodeJS, למשל).

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

לדוגמה: נגיד שיש לי שדה קלט ב-HTML, אני תופס את אירוע ה-input ורוצה לגשת לערך הקלט באמצעות e.target.value:

/**
 * Log data on input
 *
 * @param {Event} e
 */
let handleEvent = function(e){
    console.log(e.target.value);
};

document.getElementById("my-input").addEventListener("input", handleEvent);

זה גורם לאזהרת TS:

המאפיין 'value' לא קיים בטיפוס 'EventTarget'

כפי שנראה כאן:

עכשיו השאלה שלי היא, מהו התיאור הנכון @param?

עד כה ניסיתי Event, InputEvent ו-HTMLInputElement.

אני לא רוצה להשתמש באשמת סוג. במקום זאת, אני רוצה לדעת איך לציין זאת בהערות הפונקציה ישירות, כדי שלא אצטרך להגדיר @type עבור כל מופע של e.target.value בנפרד כפי שמוצע כאן.

תשובה #1

אתה יכול לכתוב את ההערת @param שלך כך:

/**
 * Log data on input
 *
 * @param {Event & { target: HTMLInputElement }} e
 */
let handleEvent = function(e){
    console.log(e.target.value);
};

ואז אתה מקבל תמיכה מלאה עבור הסוגים הנכונים:

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

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