TypeScriptプロジェクト実行エラー解決

Node.jsでTypeScriptプロジェクトを実行できないエラーの日本語解説

エラーメッセージの意味

エラーメッセージ
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts

このエラーは、Node.jsがTypeScriptファイル（.ts拡張子）を認識できないことを示しています。Node.jsはデフォルトではTypeScriptを直接実行できません。

原因と解決方法

1. TypeScriptコンパイラ（tsc）のインストール
   

   • TypeScriptプロジェクトでは、TypeScriptコードをJavaScriptに変換するコンパイラが必要です。
   • npmを使用してインストールします。

     npm install -g typescript
     

2. TypeScriptコンパイルの設定
   

3. コンパイルの実行
   

4. コンパイル後のJavaScriptファイルの実行
   

具体的な手順の例

1. プロジェクトの作成
   

   npm init -y
   

2. TypeScriptコンパイラのインストール
   

   npm install -g typescript
   

3. tsconfig.jsonファイルの作成
   

   touch tsconfig.json
   

4. tsconfig.jsonファイルに設定を追加
   

   // tsconfig.json
   {
     "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
       "outDir": "dist"
     }
   }
   

5. TypeScriptファイルの作成
   

   touch src/index.ts
   

6. TypeScriptファイルにコードを追加
   

   // src/index.ts
   console.log("Hello, TypeScript!");
   

7. JavaScriptファイルの実行
   

   node dist/index.js
   

解決方法の例

npm install -g typescript

tsconfig.jsonファイルの作成と設定

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5", // 出力するJavaScriptのバージョン
    "module": "commonjs", // モジュール形式
    "outDir": "dist" // コンパイル後のJavaScriptファイルの出力先
  }
}

TypeScriptファイルの作成とコンパイル

// src/index.ts
console.log("Hello, TypeScript!");

tsc

node dist/index.js

コード解説

1. • npmを使用して、グローバルにTypeScriptコンパイラをインストールします。
3. • TypeScriptファイルを作成し、コードを記述します。
   • tscコマンドを実行して、TypeScriptファイルをJavaScriptファイルにコンパイルします。
4. • コンパイルによって生成されたJavaScriptファイルを実行します。

動作確認

代替解決方法

TypeScriptのランタイム環境を使用する

• ts-node
  
  • ts-nodeは、TypeScriptファイルを直接実行できるランタイム環境です。
  • TypeScriptファイルを直接実行できます。

    ts-node src/index.ts
    

Babelを使用してTypeScriptをトランスパイルする

• Babel
  
  • Babelは、JavaScriptのトランスパイルツールで、TypeScriptもサポートしています。
  • npmを使用してインストールします。

    npm install -D @babel/core @babel/preset-typescript
    

  • babel.config.jsファイルを作成し、Babelの設定を記述します。

    // babel.config.js
    module.exports = {
      presets: [
        '@babel/preset-typescript'
      ]
    };
    

  • npx babel-nodeコマンドを使用して、TypeScriptファイルをトランスパイルして実行します。

    npx babel-node src/index.ts
    

ts-nodeを使用する

• ts-nodeをインストールし、TypeScriptファイルを直接実行します。

Babelを使用する

• npx babel-nodeコマンドを使用して、TypeScriptファイルをトランスパイルして実行します。
• Babelをインストールし、babel.config.jsファイルを作成して設定を記述します。

これらの代替方法を使用することで、Node.jsでTypeScriptプロジェクトを実行できるようになります。コンソールに"Hello, TypeScript!"と出力されるはずです。

注意

• Babelは、TypeScriptファイルをJavaScriptにトランスパイルしてから実行するため、コンパイルステップが必要ですが、より柔軟な設定が可能になります。
• ts-nodeは、TypeScriptファイルを直接実行するため、コンパイルステップが不要です。