WebStorm 2024.2 ヘルプ

TypeScript を JavaScript にコンパイルする

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

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

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

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

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

TypeScript: monitor compilation errors

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

始める前に

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | TypeScript を選択します。

  2. TypeScript 言語サービスチェックボックスが選択されていることを確認します。

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

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

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

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

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

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

  3. オプション :

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

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

tsconfig.json のスコープを構成する

プロジェクト内のさまざまなファイルに、さまざまな TypeScript 構成を適用する必要がある場合があります。

各フォルダー内のすべてのファイルが同じ構成に従って処理されるようにソースを配置しても問題ありません。このような場合、フォルダーごとに個別の tsconfig.json を作成するだけで済みます。

ただし、同じフォルダーに保存されているファイルに異なるルールを適用する場合は、いくつかの構成ファイルを作成し、それらのスコープを構成する必要があります。

  1. tsconfig*.json 構成ファイルを必要な数だけ作成します。

  2. 設定ダイアログ (Ctrl+Alt+S) を開き、エディター | ファイルタイプに移動し、これらすべてのファイルの名前が TypeScript 構成ファイル名パターンリストのパターンと一致することを確認します。

    必要に応じて、ファイルの種類の関連付けを追加するの説明に従ってパターンを追加します。

    File Types: tsconfig.json patterns
  3. *tsconfig*.json で、その設定に従って処理するファイルを指定します。

    • files フィールドに明示的にファイル名をリストします。

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

      TSConfig リファレンス: ファイル(英語)の詳細を参照してください。

    • include フィールドで、ファイル名またはパターンを指定します。

      "include" : ["<pattern1>, <pattern2>"]

      TSConfig リファレンス: 含める(英語)の詳細を参照してください。

    • 名前が include フィールドにリストされたパターンと一致する一部のファイルをスキップするには、その名前またはパターンを exclude フィールドにリストします。

      "exclude" : ["<pattern3>, <pattern4>"]

      TSConfig リファレンス: 除外(英語)の詳細を参照してください。

TypeScript コードのコンパイル

コンパイルを手動で呼び出すか、コードが変更されるたびに WebStorm にコードを自動的にコンパイルさせることができます。

あるいは、たとえば webpack(英語)babel(英語)、または別のツールを使用してビルドプロセスを構成することもできます。詳細については、webpack と TypeScript(英語) および Babel と TypeScript(英語) を参照してください。

手動コンパイル

  1. 状況バーの言語サービスウィジェットをクリックします。

  2. the Compile icon をクリックします。

    Compile TypeScript code

    TypeScript のコンパイルポップアップで、次のいずれかのオプションを選択します。

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

      または、開いている 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 ページを開き、変更時に再コンパイルするチェックボックスを選択します。

関連ページ:

TypeScript ツールウィンドウ

TypeScript ツールウィンドウには、TypeScript コードのコンパイルエラーが一覧表示されます。このリストは、コードに加えた変更の影響を受けず、コンパイルを再度呼び出したときにのみ更新されます。WebStorm は、TypeScript に従って、TypeScript ページで TypeScript 言語サービスがアクティブ化されている場合にのみ TypeScript ツールウィンドウを表示します。ツールウィンドウは、最初に TypeScript コードを手動でコンパイルした後にのみ表示さ...

ファイルタイプの関連付け

WebStorm は、さまざまな言語やテクノロジを表すファイルの言語固有の機能(構文のハイライトやコード分析など)について、ファイルタイプのリストを保持します。各ファイルタイプは、言語サービスを 1 つ以上のファイル名パターンにリンクします。ファイルタイプのデフォルトリストには、関連するすべてのファイル名パターンが含まれていますが、カスタム言語ファイルに新しいファイルタイプを追加したり、既存のファイルタイプに関連付けられたファイル名パターンを変更したりできます。エディターでファイルを開くと、We...

TypeScript

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

TypeScript のリファクタリング

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