Next.js 既存プロジェクトをTypeScript化をしてみよう

既にJSやJSXで作成してしまったプロジェクトをTypeScript化してみたいという需要は多々あると思います。
当ブログもそれでしたw
型anyでもいいからTS化したかったので、その手順を備忘録として書き記していきます。
ただ一方で「anyは論外だろw」という意見があるかと思います。
一旦TS化することで型定義を後から追加（拡張）しやすい利点があるため
そうすることは意義があると思っております。
個人開発だと尚更です。
実務で行うには、チームの方針や考え方があるのでそちらのルールに沿ってください。

では早速ですが、その方法の説明を行なっていきます。

tsconfig.json を作成する

touch tsconfig.json

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

自動生成されるファイルを確認する。

npm run build
or
npm run dev

上記のコマンドを叩くと
tsconfig.jsonが自動で生成されるかと思います。
自動で生成されない場合は、tsconfig.json を手動で作成してください。

{
 "compilerOptions": {
  "target": "es5",
  "lib": [
   "dom",
   "dom.iterable",
   "esnext"
  ],
  "allowJs": true,
  "skipLibCheck": true,
  "strict": false,
  "forceConsistentCasingInFileNames": true,
  "noEmit": true,
  "esModuleInterop": true,
  "module": "esnext",
  "moduleResolution": "node",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "jsx": "preserve"
 },
 "include": [
  "next-env.d.ts",
  "**/*.ts",
  "**/*.tsx"
 ],
 "exclude": [
  "node_modules"
 ]
}

さらにプロジェクトルート下に`next-env.d.ts`が生成されているかと思います。

このファイルは編集しないでください。

と書いてあるのでマニュアルで編集しないようにしましょう！

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

既存の .js or .jsx ファイルを .ts or .tsx に変更する

pages/
 -- _app.js (→ _app.tsx)
 -- api/
    |-- hello.js (→ hello.ts)
 -- index.js (→ index.tsx)
 --component/
   |--header.jsx (→ header.tsx

TypeScriptを厳格な型チェックで堅牢なコードを書いていく！

以下を設定してTSファイルを修正していきましょう！
"strict": true, // ← 厳密モード


今回は以上です。
私もTS化しながら徐々にTypeScriptに慣れていこうと思ってます！