TypeScript で "Cannot find module ... or its corresponding type declarations" エラーを解決するには？
TypeScript で発生する "Cannot find module ... or its corresponding type declarations" エラーの原因と解決策
このエラーメッセージは、TypeScript でモジュールをインポートしようとした際に、そのモジュールまたは対応する型宣言が見つからない場合に発生します。 モジュールとは、再利用可能なコードの塊であり、型宣言は、モジュールのインターフェースやクラスなどの構造を定義するファイルです。
このエラーを解決するには、以下の3つの方法があります。
モジュールをインストールする
エラーメッセージに記載されているモジュールがまだインストールされていない場合は、npm install コマンドを使用してインストールする必要があります。
npm install <モジュール名>
例：
npm install lodash
型宣言ファイルをインストールする
モジュールがインストールされているにもかかわらずエラーが発生する場合は、そのモジュールの型宣言ファイルがインストールされていない可能性があります。型宣言ファイルは通常、@types スコープ付きの名前で npm に公開されています。
npm install --save-dev @types/<モジュール名>
npm install --save-dev @types/lodash
手動で型宣言ファイルを作成する
型宣言ファイルが見つからない場合は、自分で作成する必要があります。型宣言ファイルは、.d.ts という拡張子を持つファイルで、モジュールのインターフェースやクラスなどの構造を定義します。
その他の解決策
tsconfig.jsonファイルのpathsプロパティを使用して、モジュールのエイリアスを定義する。- 相対パスではなく、絶対パスを使用してモジュールをインポートする。
- TypeScript コンパイラのオプション
--moduleを使用して、モジュールの解決方法を指定する。
TypeScript でモジュールが見つからないエラーのサンプルコードと解決例
この例では、lodash モジュールをインポートしようとしますが、モジュールまたはその型宣言が見つからないため、エラーが発生します。
コード:
import _ from 'lodash';
const result = _.map([1, 2, 3], (x) => x * 2);
console.log(result);
エラーメッセージ:
Cannot find module 'lodash' or its corresponding type declarations.
解決策 1: モジュールをインストールする
このエラーを解決するには、まず lodash モジュールをインストールする必要があります。
npm install lodash
npm install --save-dev @types/lodash
修正されたコード:
import _ from 'lodash';
const result = _.map([1, 2, 3], (x) => x * 2);
console.log(result);
このコードは、lodash モジュールとそれに対応する型宣言ファイルがインストールされていることを前提としています。 必要なモジュールと型宣言ファイルをインストールしていない場合は、上記の解決策に従ってインストールしてください。
上記で紹介した方法以外にも、TypeScript で "Cannot find module ... or its corresponding type declarations" エラーを解決する方法はいくつかあります。
モジュールを相対パスを使用してインポートすることで、エラーを解決できる場合があります。
例:
// 現在のディレクトリにある `lodash` モジュールをインポートする
import _ from './node_modules/lodash/index';
const result = _.map([1, 2, 3], (x) => x * 2);
console.log(result);
{
"compilerOptions": {
/* ... */
},
"paths": {
"lodash": ["./node_modules/lodash/index"]
}
}
この設定により、import _ from 'lodash'; と記述すると、import _ from './node_modules/lodash/index'; と解釈されます。
npx tsc --module commonjs index.ts
このコマンドは、index.ts ファイルを CommonJS モジュールとしてコンパイルします。
手動で型宣言ファイルを作成する
// lodash.d.ts
declare module 'lodash' {
export function map<T, U>(array: T[], callback: (value: T) => U): U[];
// ...
}
このファイルを作成したら、プロジェクトのルートディレクトリまたは @types ディレクトリに配置する必要があります。
注意事項
- 上記の方法はすべて、状況によって異なる場合があります。
- エラーメッセージをよく読み、何が原因でエラーが発生しているのかを理解することが重要です。
- エラーを解決できない場合は、TypeScript コミュニティに助けを求めることができます。
typescript
