Next.js + TypeScript 外部パッケージの型対応手順 #JavaScript

Next.jsプロジェクトにTypescriptを導入すること自体は、Next.jsの公式チュートリアルに従って行えば簡単に行なえます。
ですが、実際の開発ではFirebaseのような外部パッケージを追加するため、それら外部パッケージに対しても当然型対応を行う必要があります。

この記事は、これら外部パッケージについて、どういった手順で型対応を行うのか、また型定義の見つけ方についてまとめました。

外部パッケージの型対応は、以下の３つステップを踏んで行います。

手順

Next.jsは、TypeScriptを導入直後のデフォルトの状態では、厳密な型チェックは行われません。
まず、tsconfig.jsonファイルのstrictオプションを有効にし、厳密な型チェックが行われるよう設定を修正します。

tsconfig.json

{
  "compilerOptions": {
    "strict": true, // trueに修正
    // ...
  }
}

型定義を用意する方法は３つあります。
それぞれの方法について説明します。

あらかじめ外部パッケージに型定義がパッキングされているケースです。
この場合は、そのまま型定義を利用することができます。
パッケージ内に型定義があるかの確認は、以下で判断が可能です。

上図からfirebaseのパッケージは、TSマークが付いているのでパッケージに型定義が同梱されていることがわかります。

もし方法１で型定義が見つからなければ、パッケージ名の接頭に@types/パッケージ名となっているnpmパッケージを検索します。
以下の方法で型定義が無いか探してみます。

もし既存の型定義が見つからない場合、型定義を自作します。
src/types/フォルダ下に、ファイル拡張子.tsなどとし定義ファイルを作成します。

tsconfig.json

"include": {
  "types/**/*"
}

types/sample.ts

export type PersonType = {
  id: string;
  name: string;
  age: number;
};

外部パッケージの型定義の準備できたら、コードの修正にかかります。

エディッタにVSCodeを使用している場合、修正箇所を闇雲に探す必要はありません。
コード中の型定義されていない箇所に自動で赤マーカーが表示されます。
これら赤マーカーの箇所を順番に修正していくことで、自然に外部パッケージの型対応は完成します。

Next.jsの外部パッケージの型対応の手順の説明は以上となります。
最後まで読んで頂きありがとうございました。