エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

【typescript移行】Typescriptで`'x' is not defined`

経緯

js→tsへの移行をしているのだが、掲題の通り'x' is not definedが発生していて、かなり悩んだ。。。

ts移行の記事は以下

suzaku-tec.hatenadiary.jp

suzaku-tec.hatenadiary.jp

suzaku-tec.hatenadiary.jp

内容

htmlからtsで定義したfunctionを呼び出しているのだが、呼び出せていない。

ソース

ts側

function showSettingModal() {
・・・
}

html側

<a class="dropdown-item" href="#" id="show message" onclick="showSettingModal()" >show text modal</a>

原因

typescriptに移行した実装は、即時実行関数でラッピングされるため、そのまま使おうとすると、参照スコープ外になり、参照できないため、'x' is not definedが発生していた。。。

昔、typescriptやってた時も、そんなことあったなぁ~と思いながら、台パンした。

jsで動いていたソースで、変化がなかったので、問題なく動くはずだと思っていたが、ビルド結果で差異が出てくるの、マジできつい。。。

対応内容

window.showSettingModal = function showSettingModal() {
・・・
}

とりあえずwindowsに適当に加えたら動いた。
型定義で警告出てるから、その対応が必要だけど、とりあえず動かないからは前進できた。。。

参考サイト

javascriptのバンドルツールで詰まった | Octo's blog

雑記

最近、無性にキレやすくなってる気がする。。。
なんとかせねば。。。