TypeScript 導入時につまずいたこと

本ブログサイトは Next.js で作っていて、この度 TypeScript を導入しました。
つまずいた点が何点かあったので、TypeScript の導入を考えている方のヒントになればと思います。

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

1. TypeScript の導入手順

まずは Next.js への TypeScript を導入する方法です。
Next.js のチュートリアルに紹介されているので、その手順どおりに実施しました。
以下のような流れになります。

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

以上を実施しハイ終わり！ということはなく、たくさんエラーが出たので 1 つずつ修正しました。

2. 発生したエラー

a. 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

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

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": ".",
  }

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

import metadata from '../data/metadata' がエラーになりました。
import metadata from '../data/metadata.json' と拡張子まで追加することで解決できました。

TypeScript の仕様？なのかもしれないですが理由は分かっていないです。
影響箇所が 2 ファイルだったので拡張子を追加で対応しましたが、上と同様に tsconfig.json の compilerOptions で解消できるのかもしれないです。

3. まとめ

上記以外にもエラーは発生したものの、総合すると TypeScript 導入をやってよかったです。特に

「存在しないプロパティにアクセスしていた」というエラーを見つけることができた
雰囲気で import を使っていたなど、わかっていなかったことが分かった

が体験としてよかったです。

TypeScript って実際どうなのかなぁと半信半疑でしたが、「学習コスト << メンテナンスコスト」 が大きく期待できることが分かったのが最大の成果でした。

「特集 1 実戦投入 TypeScript」に TypeScript の解説が詳しいのでオススメです

WEB+DB PRESS Vol.117 単行本 – 2020/6/24