このチャプターの目次
Tips: 怠惰にTypeScript化する
TypeScript化はテンプレートを使うまでもなく、公式ドキュメントやLearnコンテンツに記載されている通り比較的簡易に行えます(筆者は毎回手でやっています)
公式ではtouch tsconfig.json
からはじめていますが、実はいきなりjs
ファイルをts
にリネームしてしまっても、Next.jsは考慮してくれます。
$ mv pages/index.js pages/index.tsx
# 必要があれば下記2ファイルも行います(場合によっては筆者は削除してしまうこともあります)
$ mv pages/_app.js pages/_app.tsx
$ mv pages/api/hello.js pages/api/hello.ts
この状態で起動すると下記のようなエラーが出現します
$ yarn dev
ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Please install @types/react and @types/node by running:
yarn add --dev typescript @types/react @types/node
エラーに従って下記のインストールを行います。[1]:
$ yarn add --dev typescript @types/react @types/node
インストールが終わり再度起動します
$ yarn dev
今度はうまく起動されるはずです。また、この際tsconfig.json
とnext-env.d.ts
が自動生成されます。
-
当然エラーを出す前に上記をインストールしても構いません。(筆者の場合、毎回入れるべき
@types
がどれだったか覚えたく無いので、ひとまずエラーを出してからインストールしています) ↩︎