TypescriptのaddEventListener部分の記述でエラーが消えない

Question

Typescript初学者です。
タブ切り替え機能を実装するJavascriptの記述をTypescriptに書き換えていますが、途中からエラーが消えなくて悩んでいます。
9行目のaddEventListener関数内、tabPanel以降がどうにもエラーが消えず、解決方法も見つからない状態です。
ざっくりした質問になってしまい申し訳ないのですが、「わからないポイントがわからない」状況から一歩も進めず困っています。。
どなたか解決策をご教示いただけますでしょうか。

export function tabPanel():void {
	const tabPanels:NodeListOf<HTMLElement> = document.querySelectorAll('.js-tab-panel');
	if(tabPanels.length) {
		Array.prototype.forEach.call(tabPanels, (tabPanel:HTMLElement) => {
			const tabGroup:HTMLElement = tabPanel.querySelector('.tab-group');
			const tabItems:NodeListOf<HTMLElement> = tabGroup.querySelectorAll('.tab-item');
			Array.prototype.forEach.call(tabItems, (tabItem:HTMLElement) => {
				tabItem.addEventListener('click', {
					tabPanel,
					handleEvent: tabSwitch
				});
			});
		});
	}
	function tabSwitch(e){
		const targetTab = e.currentTarget;
		const targetId = targetTab.querySelector('[data-target-panel]').dataset.targetPanel;
		const targetPanel = this.tabPanel.querySelector('#'+targetId);
		const currentTab = this.tabPanel.querySelector('.tab-group .is-active');
		const currentPanel = this.tabPanel.querySelector('.panel-group .is-active');
		currentTab.classList.remove('is-active');
		currentPanel.classList.remove('is-active');
		targetTab.classList.add('is-active');
		targetPanel.classList.add('is-active');
	}
}

エラーメッセージ（9行目、tabPanel部分）

(property) tabPanel: HTMLElement
この呼び出しに一致するオーバーロードはありません。
2 中 1 のオーバーロード, '(type: "click", listener: (this: HTMLElement, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions): void' により、次のエラーが発生しました。
型 '{ tabPanel: HTMLElement; handleEvent: (e: any) => void; }' の引数を型 '(this: HTMLElement, ev: MouseEvent) => any' のパラメーターに割り当てることはできません。
オブジェクト リテラルは既知のプロパティのみ指定できます。'tabPanel' は型 '(this: HTMLElement, ev: MouseEvent) => any' に存在しません。
2 中 2 のオーバーロード, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void' により、次のエラーが発生しました。
型 '{ tabPanel: HTMLElement; handleEvent: (e: any) => void; }' の引数を型 'EventListenerOrEventListenerObject' のパラメーターに割り当てることはできません。
オブジェクト リテラルは既知のプロパティのみ指定できます。'tabPanel' は型 'EventListenerOrEventListenerObject' に存在しません。

Comments

[uraway_]

おそらく、addEventListenerの使い方が間違っていることによるものかと推測しますが、エラーメッセージは具体的にどのようなものでしょうか？

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

[myc]

addEventListenerの部分については、第二引数にオブジェクトを渡す方法をとっているため、TS化以前はエラーもなく正常に動作しておりました。
https://spelunker2.wordpress.com/2017/11/29/javascript%E3%81%AEaddeventlistener%E3%81%A7%E9%96%A2%E6%95%B0%E3%81%AB%E5%BC%95%E6%95%B0%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A4%E3%81%A4%E8%A7%A3%E9%99%A4%E3%82%82%E3%81%97%E3%81%9F%E3%81%84/

エラーメッセージの添付を忘れていました、すみません。
tabPanelの部分については、
「(property) tabPanel: HTMLElement
この呼び出しに一致するオーバーロードはありません。
2 中 1 のオーバーロード, '(type: "click", listener: (this: HTMLElement, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions): void' により、次のエラーが発生しました。
型 '{ tabPanel: HTMLElement; handleEvent: (e: any) => void; }' の引数を型 '(this: HTMLElement, ev: MouseEvent) => any' のパラメーターに割り当てることはできません。
オブジェクト リテラルは既知のプロパティのみ指定できます。'tabPanel' は型 '(this: HTMLElement, ev: MouseEvent) => any' に存在しません。
2 中 2 のオーバーロード, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void' により、次のエラーが発生しました。
型 '{ tabPanel: HTMLElement; handleEvent: (e: any) => void; }' の引数を型 'EventListenerOrEventListenerObject' のパラメーターに割り当てることはできません。
オブジェクト リテラルは既知のプロパティのみ指定できます。'tabPanel' は型 'EventListenerOrEventListenerObject' に存在しません。」

長いのですが、添付させていただきます。

Answer 1

オブジェクト リテラルは既知のプロパティのみ指定できます。'tabPanel' は型 'EventListenerOrEventListenerObject' に存在しません。

エラーメッセージのとおり、イベントリスナオブジェクトには、{ handleEvent: (evt: Event) => void }しか渡すことができません。

https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L5424

以下のようにすればエラーは解消されるかと思います。

tabItem.addEventListener('click', {
    handleEvent: tabSwitch
});

また、上記のコンパイルエラーとは関係ないですが、型アノテーションは削除し、TypeScriptが教えてくれる型を使用するほうが安全性が高まります。？はオプショナルチェイニングと呼ばれるJavaScriptの新しい機能で、オブジェクトが存在しない場合でもプロパティに安全にアクセスできるようになります。

const tabGroup = tabPanel.querySelector(".tab-group");
const tabItems = tabGroup?.querySelectorAll(".tab-item");
tabItems?.forEach((tabItem) => {
  tabItem.addEventListener("click", {
    handleEvent: tabSwitch,
  });
});

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Comments

[myc]

ご解答ありがとうございます。
教えていただいた通りtabPanelを削除するとエラーは解消されましたが、肝心のタブ機能が機能しなくなりました…
もう少し自分で調べてみようと思います。
ありがとうございました。

[uraway_]

`tabSwitch`関数内で、`this.tabPanel`が取得できなくなったことが原因かと思います。(もとはオブジェクト内で渡していたがTypeScriptではできない) console.logなどでデバッグしてみてください。

querySelectorやclosestなどで、もう一度取得するのが早いかなと思います。頑張ってください