After converting my project from regular JavaScript to TypeScript, I encountered an issue where the target property of a base class EventTarget was not being recognized by TypeScript. This property worked perfectly fine in JS, so it must exist. Could it be that I'm incorrectly typing this variable?
I attempted to type the variable as Event, MouseEvent, HTMLDivElement, or HTMLAnchorElement, but none of these resolved the error regarding the missing target property.
const findClickedTab = (tabArray: object[], event: Event) => {
const clickedTabArray = tabArray.filter(tabId => tabId === event.target.id);
// irrelevant stuff removed
};
// caller of above function, which attaches to the event listener
const switchSection = event => {
const tabIdsArrayOfStrings = getTabIds();
const clickedTabIdString = findClickedTab(tabIdsArrayOfStrings, event);
};
document.addEventListener('click', switchSection);
Update 1
My tsconfig.json file includes files/folders outside of ./templates, such as ./semantic, which is on the same level as ./templates. Here's a snippet of my tsconfig.json:
{
"compilerOptions" : {
"outDir" : "./compiledJs",
"allowJs" : true,
"module" : "commonjs",
"target" : "es5",
"sourceMap" : true
},
"include" : ["./templates/**/*"],
"exclude" : [
"node_modules"
]
}
https://i.sstatic.net/79TI1.jpg
Update 2
Adding "lib" : ["dom"] to my tsconfig.json and changing the variable typing from EventTarget to Event fixed the linting error for target. However, now there is an error with id (nested under target). PhpStorm 2019.2 indicates that id is not a property of EventTarget.
Updated tsconfig.json:
{
"compilerOptions" : {
"outDir" : "./compiledJs",
"allowJs" : true,
"module" : "commonjs",
"target" : "es5",
"sourceMap" : true
},
"include" : ["./templates/**/*"],
"exclude" : [
"node_modules"
],
"lib" : ["dom"]
}