<aside> 💫 TypeScriptは、コンパイル中に構文エラーが見つかった場合、都度「ここダメだよー」と教えてくれる。

したがって、開発中（デプロイする前）からエラーを発見・修正できるので、より安全にプログラミングできると言われている。

</aside>

導入方法

1. プロジェクトを開いているVSCodeのターミナルで以下コマンドを叩き、空のtsconfig.jsonを作成する

   ※currentディレクトリがプロジェクトフォルダ名になっていることを確認すること

   touch tsconfig.json
   

   <aside> 💫 TypeScriptはコンパイラー（トランスパイラー）でしかなく、TypeScriptで書いたものを最終的にはjsに変換する。 そのコンパイルの設定（こういうときにエラー吐いてねなどの設定含む）を記述するのが、tsconfig.json

   </aside>

   

   多分作成時は赤くエラーになっていると思うけど一旦スルー

2. 続けて、以下コマンドを叩いてTypeScriptをインストールする

   npm install --save-dev typescript @types/react @types/node
   

3. さらに続けて、npm run dev を実行

   するとtsconfig.jsonに設定が記述され、next-env.d.tsファイルも作成される

   <aside> ⚠️ tsconfig.jsonはカスタマイズOK！

   next-env.d.tsは触れないこと！ （Next.jsの型がTypeScriptコンパイラに拾われるようにするためのファイルであるため）

   </aside>

tsconfig.json

next-env.d.tsファイルも作成される

next-env.d.tsファイルの中身はこんな感じ（2022.7.7時点）編集するなと書かれているね。

1. tsconfig.jsonを開き、"module":"esnext" の下に"moduleResolution": "node" を追加する

   これでtsconfig.jsonのエラーはなくなる（はず）

追加前

追加後　下の設定項目の赤波線も消えた

▼コピペ用

"moduleResolution": "node",

参考：https://qiita.com/Takuma_0920/items/b43be41540e8d6ce428f

🎉導入完了！🎉