本サイトは Next.js で作っているが TypeScript は未導入だった。
今回 TypeScript 導入が一段落したので,つまずいた点を残しておく。

※TypeScript の習熟度は WEB+DB PRESS Vol.117 で紹介されている「ディレクトリ内をツリー表示するコマンド toy-tree」を作ってみたレベル。


TypeScript の導入手順

まずは Next.js への TypeScript を導入する方法。Next.js のチュートリアルに紹介されているので,その手順どおりに実施。簡単にまとめると以下のとおり。

  1. tsconfig.json を作成
  2. typescript をインストール
  3. サーバを起動 ※設定ファイルが自動で生成される
  4. ファイルの拡張子を jsx, js から tsx, ts に変更

以上を実施し,サーバを起動するとエラーが出るので1つずつ修正していく。

つまずいた問題

Attempted import error: 'x' is not exported from 'module'

import { x } from module がエラーになる。結論から行くと
import x from module と, {} を削除すればエラーが解消できる。

default export の場合は {} は使わないというルールのもよう。
※ 参照) reactjs - Receiving "Attempted import error:" in react app - Stack Overflow
エラーは解消できたが,import / export を雰囲気で使っていて,全然分かってないことが分かってよかった。

相対パスでインポートができない

Module not found: が大量発生。
import x from lib/components/module を
import x from ../lib/components/module のように相対バスで書けば解消できる。
ただこの改修方法は影響範囲が大きく,今後も改修するモチベーション低下の原因になりそうなので採用したくない。

調べてみると tsconfig.json に compilerOptions があり,カスタマイズできるもよう。
※ 参照) TypeScript: TSConfig Reference - Docs on every TSConfig option

コンパイラオプションで対応できたので,各ファイルの各インポートパスを修正するということは回避できた。

  "compilerOptions": {
    "baseUrl": ".",
  }

jsonファイルがインポートできない

import metadata from '../data/metadata' がエラーになる。結論から行くと
import metadata from '../data/metadata.json' と拡張子まで追加すればエラーが解消できる。

TypeScript の仕様?なのかな。 影響範囲が2ファイルだったので拡張子を追加したが,上と同様に compilerOptions で解消できるのかもしれない。

まとめ

終わってみれば,TypeScript 導入はやってよかった。いつくか理由を書き出してみる。

TypeScript って実際どうなのかなぁと半信半疑だったが,導入してすぐにエラーを発見できたことで 「学習コスト < メンテナンスコスト」が大きく期待できることが分かったのが最大の成果。