見出し画像

JavaScriptをtsconfigを使って書くと快適だった

最近、JavaScriptでテトリスを作ってます。
テトリスくらいならAIにお願いすれば一瞬で完成しますが、自分でアルゴリズムを考えながら、「あーでもない、こーでもない」と言いながら作るのは楽しいものです。

テトリスは趣味で作っているので、ブラウザで簡単に実行できるJavaScriptで書いてますが、JavaScriptは型チェックがないため、バグを埋め込みやすいところが難点です。かといってTypeScriptで書いてバンドラーでビルドするのも、趣味レベルではやりすぎかなぁと。。

で、だどり着いたのがtsconfigだけ使う方法です。
tsconfigはTypeScriptを書くときの設定ファイルですが、allowJsなどをtrueにするとJavaScriptもTypeScriptとして認識し、型チェックをしてくれます。
具体的には次のような設定だけ書き、あとは普通にJavaScriptのコードを書きます。

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "types": ["p5/global"],
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "target": "ES6",
    "noEmit": true
  }
}

この状態でJavaScriptを書くと、コーディング中だけ型チェックが効きます。この方法ではinterfaceなどのTypeScript特有の書き方はできませんが、それもjsdocで@typedefなどで定義すれば型として認識してくれます。
下の画像は引数に数値を渡すべきところに文字列を渡したときのエラー表示です。

add(x, y)だけでは数値も文字列も渡せますが、jsdocで引数を数値(number)に制限しているため、それ以外が渡されるとエラーになります。このエラーはIDE上に表示されるだけで、ブラウザでは実行できます。(JavaScriptでは文字列結合も x + y のように書けるため)
あくまでエラーを知らせてくれるだけで、実行時にエラーを発生させたりはできません。

これで良いや感がすごい

今回作ったテトリスはtsconfigだけでJavaScriptを書いてみましたが、全然OK。困ることが何もない。ビルドもいらないから、書いた瞬間ブラウザをリロードすれば実行できる。快適すぎる。趣味で書く程度ならこれで十分だと思います。

ちなみに、作成中のテトリスはだいたい完成しました。
もしよかったら遊んでみてください。

テトリス ※PCのみで遊べます。スマホでは遊べません。
ソースコード(GitHub)


この記事が気に入ったらサポートをしてみませんか?