TypeScript を JavaScript にコンパイルする
ブラウザーと Node.js は JavaScript のみを処理するため、TypeScript コードを実行またはデバッグする前にコンパイルする必要があります。
コンパイルでは、TypeScript コードと実際に実行される JavaScript コード間の対応を設定するソースマップ(英語)を作成することもできます。
PyCharm には、TypeScript コンパイラーが組み込まれています。デフォルトでは、生成された JavaScript ファイルとソースマップを TypeScript ファイルの横に出力します。
コンパイルは、以下の TypeScript コードのコンパイルに従って、状況ツールバーの TypeScript ウィジェットからコンパイルアクションを使用して呼び出されます。
コンパイルエラーは TypeScript ツールウィンドウで報告されます。このリストは、コードに加えた変更の影響を受けず、コンパイルを再度呼び出したときにのみ更新されます。
ツールウィンドウは、最初に TypeScript コードを手動でコンパイルした後にのみ表示されます。その後、メインメニューの またはツールウィンドウバーからツールウィンドウにアクセスできるようになります。
始める前に
Ctrl+Alt+S を押して設定を開き、 を選択します。
TypeScript 言語サービスチェックボックスが選択されていることを確認します。
tsconfig.json ファイルを作成して構成する
デフォルトでは、組み込みコンパイラーは、デバッグセッション中に TypeScript コードをステップスルーできるソースマップを作成しません。コンパイラーは、デフォルトで、アクティブなエディタータブの TypeScript ファイル、または現在のプロジェクトのすべての TypeScript ファイルも処理します。
tsconfig.json ファイルを使用すると、このデフォルトの動作を変更して、ソースマップを生成し、カスタムスコープのファイルのみをコンパイルできます。
tsconfig.json ファイルを作成する
プロジェクトツールウィンドウで、TypeScript コードがあるフォルダー (ほとんどの場合、プロジェクトのルートフォルダー) を選択し、コンテキストメニューからを選択します。
コンパイル時にソースマップを生成するには、
sourceMapプロパティがtrueに設定されていることを確認してください。オプション :
プロジェクト全体であるデフォルトのコンパイルスコープを上書きするには、
filesプロパティを追加し、処理するファイルの名前を次の形式で入力します。"files" : ["<file1.ts>","<file2.ts>"],
tsconfig.json のスコープを構成する
プロジェクト内のさまざまなファイルに、さまざまな TypeScript 構成を適用する必要がある場合があります。
各フォルダー内のすべてのファイルが同じ構成に従って処理されるようにソースを配置しても問題ありません。このような場合、フォルダーごとに個別の tsconfig.json を作成するだけで済みます。
ただし、同じフォルダーに保存されているファイルに異なるルールを適用する場合は、いくつかの構成ファイルを作成し、それらのスコープを構成する必要があります。
tsconfig*.json 構成ファイルを必要な数だけ作成します。
設定ダイアログ (Ctrl+Alt+S) を開き、に移動し、これらすべてのファイルの名前が TypeScript 構成ファイル名パターンリストのパターンと一致することを確認します。
必要に応じて、ファイルの種類の関連付けを追加するの説明に従ってパターンを追加します。
各 *tsconfig*.json で、その設定に従って処理するファイルを指定します。
filesフィールドに明示的にファイル名をリストします。"files" : ["<file1.ts>","<file2.ts>"],TSConfig リファレンス: ファイル(英語)の詳細を参照してください。
includeフィールドで、ファイル名またはパターンを指定します。"include" : ["<pattern1>, <pattern2>"]TSConfig リファレンス: 包含(英語)の詳細を参照してください。
名前が
includeフィールドにリストされたパターンと一致する一部のファイルをスキップするには、その名前またはパターンをexcludeフィールドにリストします。"exclude" : ["<pattern3>, <pattern4>"]TSConfig リファレンス: 除外(英語)の詳細を参照してください。
TypeScript コードのコンパイル
コンパイルを手動で呼び出すか、コードが変更されるたびに PyCharm にコードを自動的にコンパイルさせることができます。
あるいは、たとえば webpack(英語)、babel(英語)、または別のツールを使用してビルドプロセスを構成することもできます。詳細については、webpack と TypeScript(英語) および Babel と TypeScript(英語) を参照してください。
手動コンパイル
状況バーの言語サービスウィジェットをクリックします。
をクリックします。
TypeScript のコンパイルポップアップで、次のいずれかのオプションを選択します。
アプリケーション全体の TypeScript コードをコンパイルするには、すべてをコンパイルを選択します。
または、開いている TypeScript ファイルのコンテキストメニューから TypeScript のコンパイルを選択します。
1 つのファイルをコンパイルするには、TypeScript のコンパイルポップアップでそのファイルへのパスを選択します。
カスタムスコープからファイルをコンパイルするには、上記のように、ファイルが tsconfig.json の
filesプロパティにリストされていることを確認します。TypeScript のコンパイルポップアップで、tsconfig.json へのパスを選択します。
変更時の自動コンパイル
Ctrl+Alt+S 設定の言語 & フレームワーク | TypeScript ページを開き、変更時に再コンパイルするチェックボックスを選択します。
関連ページ：
TypeScript ツールウィンドウ
TypeScript ツールウィンドウには、TypeScript コードのコンパイルエラーが一覧表示されます。このリストは、コードに加えた変更の影響を受けず、コンパイルを再度呼び出したときにのみ更新されます。PyCharm は、TypeScript に従って、TypeScript ページで TypeScript 言語サービスがアクティブ化されている場合にのみ TypeScript ツールウィンドウを表示します。ツールウィンドウは、最初に TypeScript コードを手動でコンパイルした後にのみ表示され...
ファイルタイプの関連付け
PyCharm は、さまざまな言語やテクノロジを表すファイルの言語固有の機能（構文のハイライトやコード分析など）について、ファイルタイプのリストを保持します。各ファイルタイプは、言語サービスを 1 つ以上のファイル名パターンにリンクします。ファイルタイプのデフォルトリストには、関連するすべてのファイル名パターンが含まれていますが、カスタム言語ファイルに新しいファイルタイプを追加したり、既存のファイルタイプに関連付けられたファイル名パターンを変更したりできます。エディターでファイルを開くと、PyC...
TypeScript
PyCharm は、TypeScript ソースコードの開発、実行、デバッグをサポートします。PyCharm は .ts および .tsx ファイルを認識し、ユーザー側で追加の手順を行わなくても、編集するためのあらゆるコーディング支援を提供します。TypeScript ファイルには、アイコンが付いています。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般...
TypeScript のリファクタリング
リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。移動リファクタリング：PyCharm を使用すると、ファイルやフォルダーを移動できるだけでなく、TypeScript の最上位シンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押すか、メインメニューまたは...