TypescriptでjQueryの$(this)が暗黙的に型anyになる問題を解決

作成日: 2024年07月08日

TypescriptでjQueryの$(this)が暗黙的に型anyになる問題を解決

jQueryでよく書くクリックイベントをTypescriptで書き直したときに$(this)がany型に判断されることがわかった。

const target: JQuery<HTMLElement> = $('.hoge-class');

target.find('a').on('click', (e: JQuery.ClickEvent<HTMLAnchorElement>): void => {
    e.preventDefault();

    const fuga = $(this); ← 型注釈がないのでany型になると言われる
    ...
    ...

const target: JQuery<HTMLElement> = $('.hoge-class');

target.find('a').on('click', (e: JQuery.ClickEvent<HTMLAnchorElement>): void => {

e.preventDefault();

const fuga = $(this); ← 型注釈がないのでany型になると言われる

...

thisをe.targetとすることで解決。

const target: JQuery<HTMLElement> = $('.hoge-class');

target.find('a').on('click', (e: JQuery.ClickEvent<HTMLAnchorElement>): void => {
    e.preventDefault();

    const fuga = $(e.target); ← OK
    ...
    ...

const target: JQuery<HTMLElement> = $('.hoge-class');

target.find('a').on('click', (e: JQuery.ClickEvent<HTMLAnchorElement>): void => {

e.preventDefault();

const fuga = $(e.target); ← OK

...

コメントをするコメントをキャンセル

コメントはありません。

TypescriptでjQueryの$(this)が暗黙的に型anyになる問題を解決

TypescriptでjQueryの$(this)が暗黙的に型anyになる問題を解決

コメントをする コメントをキャンセル

コメント

コメントをするコメントをキャンセル