TypeScript ES6 import module エラー「ファイルはモジュールではありません」の原因と解決方法

TypeScript ES6 import module エラー「ファイルはモジュールではありません」解説

原因

このエラーは以下の原因が考えられます。

1. インポート先のファイルがJavaScriptファイルではない
2. インポート先のファイルに export キーワードがない
3. tsconfig.json ファイルの設定が間違っている

解決方法

以下の方法で解決できます。

インポート先のファイルがJavaScriptファイルでない場合は、拡張子を .js に変更します。

インポート先のファイルに export キーワードがない場合は、以下のいずれかの方法で修正します。

• デフォルトエクスポートを使用する場合は、export default キーワードを使用します。
• 個別のエクスポートを使用する場合は、export キーワードとエクスポートしたい変数または関数を記述します。

tsconfig.json ファイルの設定が間違っている場合も、このエラーが発生する可能性があります。

以下の設定を確認します。

• module オプションが es6 または commonjs に設定されていること
• target オプションが es6 または es5 に設定されていること

• TypeScript ES6 import module は、JavaScriptのES6モジュール構文を利用して、複数のファイルを組み合わせてプログラムを作成するための機能です。
• import ステートメントを使用して、他のファイルからモジュールをインポートできます。
• export キーワードを使用して、モジュールから変数や関数を公開できます。

• 使用しているTypeScriptのバージョン
• 使用しているエディタまたはIDE
• エラーメッセージの詳細
• ソースコード

import { add, multiply } from './math';

const result1 = add(1, 2);
const result2 = multiply(3, 4);

console.log(`result1: ${result1}`);
console.log(`result2: ${result2}`);

export function add(a: number, b: number): number {
  return a + b;
}

export function multiply(a: number, b: number): number {
  return a * b;
}

このコードを実行すると、以下の出力が得られます。

result1: 3
result2: 12

解説

• main.ts ファイルは math.ts ファイルから add 関数と multiply 関数をインポートしています。
• math.ts ファイルは add 関数と multiply 関数をエクスポートしています。

実行方法

このコードを実行するには、以下の手順が必要です。

1. TypeScriptをインストールする。
2. main.ts ファイルと math.ts ファイルを同じディレクトリに保存する。
3. 以下のコマンドを実行する。

tsc main.ts

1. 生成された main.js ファイルを実行する。

node main.js

デフォルトエクスポート

export default function add(a: number, b: number): number {
  return a + b;
}

import add from './math';

const result = add(1, 2);

console.log(`result: ${result}`);

名前空間

export namespace Math {
  export function add(a: number, b: number): number {
    return a + b;
  }

  export function multiply(a: number, b: number): number {
    return a * b;
  }
}

import * as Math from './math';

const result1 = Math.add(1, 2);
const result2 = Math.multiply(3, 4);

console.log(`result1: ${result1}`);
console.log(`result2: ${result2}`);

相対パス

相対パスを使用すると、インポート先のファイルのパスを指定できます。

export function add(a: number, b: number): number {
  return a + b;
}

import { add } from './math';

const result = add(1, 2);

console.log(`result: ${result}`);

型定義ファイル

型定義ファイルを使用すると、モジュールの型情報を提供できます。

declare function add(a: number, b: number): number;

export default add;

import add from './math';

const result = add(1, 2);

console.log(`result: ${result}`);