Chapter 04無料公開

Tips. 怠惰にTypeScript化する

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.jsonnext-env.d.tsが自動生成されます。

脚注
  1. 当然エラーを出す前に上記をインストールしても構いません。(筆者の場合、毎回入れるべき@typesがどれだったか覚えたく無いので、ひとまずエラーを出してからインストールしています) ↩︎