IntelliJ IDEA 2020.3 ヘルプ

TypeScript を JavaScript にコンパイルする

ブラウザーと Node.js は JavaScript のみを処理するため、TypeScript コードを実行またはデバッグする前にコンパイルする必要があります。

コンパイルでは、TypeScript コードと実際に実行される JavaScript コード間の対応を設定するソースマップ(英語)を作成することもできます。

IntelliJ IDEA には、TypeScript コンパイラーが組み込まれています。デフォルトでは、生成された JavaScript ファイルとソースマップを TypeScript ファイルの横に出力します。

コンパイルは、以下の TypeScript コードのコンパイルに従って、状況ツールバーの TypeScript ウィジェットからコンパイルアクションを使用して呼び出されます。

コンパイルエラーは TypeScript ツールウィンドウで報告されます。このリストは、コードに加えた変更の影響を受けず、コンパイルを再度呼び出したときにのみ更新されます。

TypeScript: monitor compilation errors

ツールウィンドウは、TypeScript コードを最初に手動でコンパイルした後にのみ表示されます。その後、メインメニューの表示 | ツールウィンドウ | TypeScript またはツールウィンドウバーからツールウィンドウにアクセスできます。

始める前に

  • 設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、言語およびフレームワーク | TypeScript に移動して、TypeScript 言語サービスチェックボックスが選択されていることを確認します。

tsconfig.json ファイルを作成する

デフォルトでは、組み込みコンパイラーは、デバッグセッション中に TypeScript コードをステップスルーできるソースマップを作成しません。コンパイラーは、デフォルトで、アクティブなエディタータブの TypeScript ファイル、または現在のプロジェクトのすべての TypeScript ファイルも処理します。

tsconfig.json ファイルを使用すると、このデフォルトの動作を変更して、ソースマップを生成し、カスタムスコープのファイルのみをコンパイルできます。

  1. プロジェクトツールウィンドウで、TypeScript コードがあるフォルダー(ほとんどの場合はプロジェクトルートフォルダー)を選択し、コンテキストメニューから新規 | tsconfig.json ファイルを選択します。

  2. コンパイル時にソースマップを生成するには、sourceMap プロパティが true に設定されていることを確認してください。

  3. オプション :

    プロジェクト全体であるデフォルトのコンパイルスコープを上書きするには、files プロパティを追加し、処理するファイルの名前を次の形式で入力します。

    "files" : ["<file1.ts>","<file2.ts>"],

TypeScript コードのコンパイル

  • コードを手動でコンパイルするには、状況バーの TypeScript ウィジェットをクリックし、コンパイルを選択してから、次のいずれかのオプションを選択します。

    • アプリケーション全体の TypeScript コードをコンパイルするには、すべてコンパイルを選択します。

      Compile TypeScript code

      または、開いている TypeScript ファイルのコンテキストメニューから TypeScript のコンパイルを選択します。

      Compile TypeScript from context menu of a file
    • 1 つのファイルをコンパイルするには、エディターでそのファイルを開き、TypeScript ウィジェットのリストからファイルへのパスを選択します。

      TypeScript widget: compile current file
    • カスタムスコープからファイルをコンパイルするには、上記のように、tsconfig.jsonfiles プロパティにファイルがリストされていることを確認してください。状況バーの TypeScript ウィジェットをクリックし、コンパイルを選択してから、tsconfig.json へのパスを選択します。

      TypeScript widget: compile custom scope from tsconfig.json
  • ファイルが変更されるたびに自動的にコンパイルするには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、言語およびフレームワーク | TypeScript に移動して、変更時に再コンパイルチェックボックスを選択します。

または、webpack(英語)babel(英語)、または別のツールを使用して、ビルドプロセスを構成することもできます。

関連ページ:

TypeScript ツールウィンドウ

TypeScript ツールウィンドウには、TypeScript コードのコンパイルエラーが一覧表示されます。このリストは、コードに加えた変更の影響を受けず、コンパイルを再度呼び出したときにのみ更新されます。現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターの右側だけでなく、問題ツールウィンドウの現在のファイルタブにも表示されることに注意してください。TypeScript を確認するから詳細を参照してください。IntelliJ IDEA は、TypeScript に従っ...

TypeScript

IntelliJ IDEA は、TypeScript ソースコードの開発、実行、デバッグをサポートしています。IntelliJ IDEA は .ts および .tsx ファイルを認識し、追加の手順なしで編集するための幅広いコーディング支援を提供します。TypeScript ファイルはアイコンでマークされています。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、およ...

TypeScript のリファクタリング

リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。移動リファクタリング:IntelliJ IDEA を使用すると、ファイルやフォルダーを移動できるだけでなく、TypeScript の最上位シンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、または変数を移動する移動するシンボルを選択します。を押すか、メ...