TypeScript

PyCharm は TypeScript(英語) ソースコードの開発、実行、デバッグをサポートします。PyCharm は .ts および .tsx ファイルを認識し、ユーザー側で追加の手順を踏むことなく編集するためのコーディング支援を提供します。TypeScript ファイルはアイコン。

TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般的で TypeScript 固有リファクタリングが含まれます。PyCharm はまた、オンザフライで TypeScript コードを検証し、専用の問題ツールウィンドウでエラーを表示します。

コンパイルエラーは TypeScript ツールウィンドウで報告されます。TypeScript を JavaScript にコンパイルするから詳細を参照してください。

始める前に

設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

新しいアプリケーションを作成する

PyCharm は基本的な TypeScript プロジェクトを作成できるため、最小限の構成でプロジェクトをセットアップできます。生成されたプロジェクトには、package.json、tsconfig.json、console.log() ウェルカムメッセージを含む index .ts ファイルが含まれます。さらに、サンプル Web アプリケーションを生成することもできます。

デフォルトでは、PyCharm は自動的に Git リポジトリを作成し、生成されたソースを Git の制御下に置きます。

ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、Angular CLI、React アプリ、React Native など、アプリケーション開発を目的とした任意のプロジェクトタイプを選択します。
右側のウィンドウで、プロジェクト関連のファイルが保存されるフォルダーのパスを指定します。
詳細設定を展開し、その他の必要なプロジェクトオプションを指定します。

既存の TypeScript アプリケーションから始める

既存の TypeScript アプリケーションの開発を続ける場合は、PyCharm で開くだけです。必要に応じて、必要な npm の依存関係をダウンロードします。

すでにマシン上にあるアプリケーションソースを開く

ウェルカム画面でオープンをクリックするか、メインメニューからファイル | オープンを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

ウェルカム画面でリポジトリのクローンをクリックします。
あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクト、Git | クローン、VCS | バージョン管理から取得を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

プロジェクトのセキュリティ

PyCharm の外部で作成され、そこにインポートされたプロジェクトを開くと、PyCharm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

次のいずれかのオプションを選択します。

セーフモードでプレビュー : この場合、PyCharm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
PyCharm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、PyCharm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PyCharm 機能が使用可能になることを意味します。
開かない : この場合、PyCharm はプロジェクトを開きません。

プロジェクトのセキュリティの詳細を参照してください。

TypeScript を確認する

PyCharm は、主に TypeScript を JavaScript にコンパイルする TypeScript 言語サービス(英語)のデータに基づいて TypeScript コードを検証します。

現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターおよび問題ツールウィンドウのファイルタブから入手できます。

プロジェクト全体のエラーとそのクイックフィックスは、問題ツールウィンドウのプロジェクトエラータブに表示されます。ツールウィンドウを開くには、エディターの右上隅にあるインスペクションウィジェットをクリックします。

詳細については、エディターで問題を表示してクイックフィックスを適用するおよび問題ツールウィンドウを参照してください。

現在のファイルで TypeScript を確認する

エディターで、ハイライトされた問題の上にマウスを置きます。PyCharm は、問題の説明を含むツールチップを表示します。
提案されたクイックフィックスを適用するか、その他のアクションをクリックして、リストから関連するものを選択します。
または、問題ツールウィンドウ Alt+6 のファイルタブを開きます。ここでは、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずにエディタープレビューペインで修正したりできます。問題ツールウィンドウから詳細を参照してください。

プロジェクト全体で TypeScript を確認する

問題ツールウィンドウを開くには、エディターの右上隅にあるインスペクションウィジェットをクリックします。

または、メインメニューから表示 | ツールウィンドウ | 問題を選択するか、Alt+6 を押します。
プロジェクトエラータブを開きます。このタブには、プロジェクト全体のエラーが、検出されたファイルごとにグループ化されたエラーメッセージとともに表示されます。
ここでは、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずにエディタープレビューペインでフラグメントを修正したりできます。問題ツールウィンドウから詳細を参照してください。

TypeScript 言語サービスとの統合を構成する

ほとんどの場合、すべてがすぐに利用できる動作し、手動で構成する必要はありません。ただし、カスタム typescript パッケージを使用する場合、コマンドラインオプション(英語)を TypeScript 言語サービスに渡す場合は、デフォルト設定をカスタマイズできます。

設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | TypeScript に移動します。
または、状況バーの言語サービスウィジェットをクリックしてから、をクリックします。
現在のファイルに対して他の言語サービスが実行されていない場合、ウィジェットのタイトルは TypeScriptt に変わります。
エディターで TypeScript ファイルを開いた後は、TypeScript ウィジェットがステータスバーに常に表示されます。
TypeScript ページが開きます。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、PyCharm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、PyCharm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、をクリックして新しいインタープリターを構成することもできます。
TypeScript フィールドで、使用する TypeScript のバージョンを指定します（PyCharm は現在選択されているバージョンを表示します）。
- デフォルトでは、プロジェクトの node_modules フォルダーにある typescript パッケージが使用されます。
- バンドル: このオプションを選択すると、PyCharm に同梱されている typescript パッケージを使用して、別のパッケージを見つけようとしません。
- 選択 : PyCharm にバンドルされているパッケージではなく、カスタム typescript パッケージを使用するには、このオプションを選択します。開いたダイアログで、関連するパッケージへのパスを選択します。
- プロジェクトパッケージマネージャーが Yarn 2(英語) の場合、Yarn 2 を介してインストールされた typescript パッケージを使用する必要があります。この場合、デフォルトで yarn:package.json:typescript が選択されています。
  npm と Yarn のパッケージマネージャーの詳細を参照してください。
TypeScript 言語サービスチェックボックスが選択されていることを確認します。結果:
- 構文とエラーのハイライトは、TypeScript 言語サービスのアノテーションに基づいています。
- 補完リストには、TypeScript 言語サービスの提案と PyCharm によって計算された提案が含まれています。
- TypeScript コードは JavaScript にコンパイルされています。
以下のコントロールを使用して、TypeScript 言語サービスの動作を構成します。
- プロジェクトエラーの表示 - デフォルトでは、このチェックボックスはオンになっており、TypeScript 言語サービスはプロジェクト全体のコードを確認します。検出されたエラーは、発生したファイルごとにグループ化されて、問題ツールウィンドウのプロジェクトエラータブにリストされます。
  パフォーマンスの問題を回避するには、プロジェクトエラーの表示チェックボックスをオフにして、ファイルを開いたときにのみ TypeScript 言語サービスがファイルをチェックするようにします。プロジェクトエラータブには、すでに開いているファイルでのみ検出されたエラーが一覧表示されます。
- 候補の表示 - デフォルトでは、このチェックボックスはオンになっており、PyCharm は実際のエラーに加えて、TypeScript 言語サービスがコード内で検出した潜在的な問題を表示します。
- サービス駆動型エンジンを有効にする - TypeScript コンパイラーのデータに基づいてシンボルの種類を評価するには、このチェックボックスを選択します。
  デフォルトでは、チェックボックスはオフになっているため、型評価、解決、コードインスペクション、およびリファクタリングは、PyCharm 内部 TypeScript エンジンからの型情報に基づいて行われます。
  このデフォルトの動作では、PyCharm 内部の TypeScript エンジンが使用する型評価アルゴリズムが TypeScript コンパイラーのアルゴリズムと異なるため、パフォーマンスの問題や型解決のバグが発生する可能性があります。チェックボックスを選択すると、これらの問題を回避できる場合があります。
  サービス駆動型エンジンを有効にするチェックボックスが選択されているか選択されていないかに関係なく、TypeScript 言語サービスチェックボックスが選択されている場合は、コードのハイライトと補完の一部は常に TypeScript 言語サービスから取得されます。
オプションフィールドで、tsconfig.json ファイルが見つからない場合に TypeScript 言語サービスに渡されるコマンドラインオプションを指定します。TSC 引数(英語)で受け入れ可能なオプションのリストを参照してください。-w または --watch （入力ファイルを見る）オプションは無関係であることに注意してください。

TypeScript 言語サービスを再起動する

状況バーの言語サービスウィジェットをクリックし、次にをクリックします。
現在のファイルに対して他の言語サービスが実行されていない場合、ウィジェットのタイトルは TypeScriptt に変わります。

エラーメッセージをローカライズする

設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | TypeScript に移動します。
TypeScript フィールドに、Bundled とは異なる typescript パッケージを指定します。これは、プロジェクトの node_modules フォルダーまたは他の場所の typescript パッケージである可能性があります。
「オプション」フィールドに --locale <abbreviation of the language to use> と入力します。現在、韓国語 (ko) と日本語 (ja) がサポートされています。

TypeScript コードを編集

PyCharm は、コンテキスト認識コード補完、シンボルの自動インポート、ドキュメント検索、パラメーターヒント、ナビゲーション、TypeScript 対応の構文ハイライト、lint、リファクタリングなどを含む、TypeScript のスマートコーディング支援を提供します。

自動インポート

PyCharm は、モジュール、クラス、コンポーネント、エクスポートされたその他の TypeScript シンボルのインポート文を生成できます。既定では、TypeScript シンボルを入力すると、PyCharm によってインポートステートメントが追加されます。

インポート文を最適化してスタイルを設定する方法については、自動インポートを参照してください。

コードを入力するか、まだインポートされていないシンボルを含むフラグメントを貼り付けると、PyCharm はこのシンボルのインポートステートメントを生成することもできます。シンボルをインポートするソースが 1 つしかない場合、PyCharm はインポートステートメントをサイレントに挿入します。それ以外の場合は、自動インポートのツールチップまたは専用インポートのクイックフィックスを使用してください。

コード補完にインポートステートメントを追加する

設定ダイアログ（Ctrl+Alt+S）で、エディター | 一般 | 自動インポートに移動します。自動インポートページが開きます。
TypeScript/JavaScript 領域で、TypeScript のインポートを自動的に追加するおよびコード補完時に実行チェックボックスが選択されていることを確認します。

コードの入力または貼り付け時にインポート文を追加する

設定ダイアログ（Ctrl+Alt+S）で、エディター | 一般 | 自動インポートに移動します。自動インポートページが開きます。
TypeScript/JavaScript 領域で、TypeScript のインポートを自動的に追加するおよび明確なインポートをオンザフライで追加チェックボックスが選択されていることを確認します。

自動インポートのツールチップを使用する

TypeScript シンボルのインポートステートメントが補完または編集時に追加されなかった場合、PyCharm はシンボルのインポートを提案するポップアップを表示します。提案を受け入れるには、Alt+Enter を押します。
インポート可能なソースが複数ある場合、PyCharm はそのことを通知します。
この場合、Alt+Enter を押すと、提案のリストが開きます:
自動インポートのツールチップを非表示にするには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | 一般 | 自動インポートに移動して、自動インポートツールチップを使用チェックボックスをオフにします。

クイックフィックスのインポートを使用する

自動インポートツールチップが表示されない場合は、いつでも Alt+Enter を押して、クイックフィックスを介してインポートステートメントを追加できます。

インポートを生成するには、インポート元を挿入を選択します。
シンボルのインポート元が 1 つだけの場合、PyCharm はインポートステートメントを生成します。
シンボルのインポート元が複数ある場合は、候補リストから関連するものを選択します。
プロジェクトで TypeScript 言語サービスが有効になっている場合は、その提案を使用することもできます。

import ステートメントでの type 修飾子の使用を構成する

Ctrl+Alt+S を押して設定を開き、エディター | コードスタイル | TypeScript を選択します。
インポートタブに切り替え、インポートで型修飾子を使用するフィールドで、タイプのインポートステートメントでの type 修飾子の使用を構成します。この設定はタイプにのみ適用され、どのオプションを選択しても、タイプ以外には type 修飾子は挿入されないことに注意してください。
このオプションを使用すると、tsconfig.json で「importsNot UsedAsValues」: " エラー "(英語) または「逐語的モジュール構文」: true(英語) が指定されている場合に type 修飾子が追加されます。
それ以外の場合、優先されるインポートタイプがない場合、type 修飾子は挿入されません。
このオプションを使用すると、tsconfig .json で「importsNot UsedAsValues」: " エラー "(英語) または「逐語的モジュール構文」: true(英語) が指定されているかどうかに関係なく、常に type 修飾子が挿入されます。
このオプションを使用すると、tsconfig.json の「importsNot UsedAsValues」: " エラー "(英語) または「逐語的モジュール構文」: true(英語) フラグに関係なく、PyCharm は type 修飾子を使用しません。

type 修飾子を含む import ステートメントがすでに存在する場合、この修飾子は、選択したオプションや tsconfig.json の設定に関係なく、型をさらにインポートするために常に使用されます。

定数の場合、type 修飾子の代わりに {<constant name>} 指定子が使用されます。TypeScript 4.5 以降で自動または常時が選択されている場合、以前のすべての修飾子は {type} 指定子に変換されます。それ以外の場合、既存の指定子はすべて変更されません。

TypeScript オフィシャル Web サイト(英語)の詳細を参照してください。

インポートステートメントの外観を構成する

設定ダイアログ（Ctrl+Alt+S）で、エディター | コードスタイル | TypeScript に移動し、インポートタブのコントロールを使用します。

ドキュメントの検索

PyCharm は、プロジェクトやその依存関係、外部ライブラリで定義されたシンボル、標準の JavaScript API のシンボルの参照を TypeScript がすべて実装しているため、参照を取得できます。

デフォルトでは、ドキュメントはドキュメントポップアップに表示されますが、いつでもドキュメントツールウィンドウで開くことも、デフォルトでドキュメントツールウィンドウに表示されるように設定することもできます。

クイックドキュメントを見る

エディターで必要なシンボルの上にマウスを置きます。
あるいは、シンボルにキャレットを置き、Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントを選択します。
デフォルトでドキュメントツールウィンドウでクイックドキュメントを開くには、ポップアップまたはツールウィンドウのツールバーでをクリックし、ドキュメントのポップアップを前に表示オプションをオフにします。
ポップアップでをクリックしてフォントサイズを変更するか、クイックドキュメントツールバーを表示するか、ソースコードに移動します。
詳細は、ポップアップのクイックドキュメントを参照してください。

ツールウィンドウで特定のコード要素のドキュメントを開き、ツールウィンドウにドキュメントを保持するに従って、現在のファイルの他の要素のドキュメントを表示し続けることができます。

ツールウィンドウでは、コードドキュメントが固定されていないタブ（アスタリスクシンボル（*）でマークされたタブ）に表示されます。このドキュメントを表示するには、シンボルにカーソルを合わせるか、キャレットを配置します。

キャレットのシンボルの MDN ドキュメントを表示する

TypeScript で利用可能な標準の JavaScript メソッドの場合、PyCharm は対応する MDN 記事へのリンクも表示します。

ドキュメントウィンドウ Ctrl+Q で、MDN リンクをクリックします。
または、Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

PyCharm は、デフォルトの PyCharm ブラウザーで MDN 記事を開きます。

インレイヒントを見る

インレイヒントはエディターに表示され、コードに関する追加情報を提供して、読みやすく移動しやすくします。

インレイヒントは、.ts および .tsx ファイルで使用できます。

TypeScript 言語サービスが有効になっていて、TypeScript バージョンが 4.4 以上の場合、インレイヒントは TypeScript 言語サービスから取得されます。
以前の TypeScript バージョンの場合、または TypeScript 言語サービスが無効になっている場合、インレイヒントは内部 PyCharm エバリュエーターから取得されます。

常にファイル全体を分析する多くのインスペクションやハイライトとは異なり、ヒントは現在表示されている領域のみ取得され、スクロール時に更新されます。この動作は、より高いパフォーマンスを目的としています。

パラメーターヒント

パラメーターヒントは、メソッドと関数内のパラメーターの名前を表示して、コードを読みやすくします。

TypeScript バージョン 5.2 以降では、パラメーターヒントはホバーするとリンクに変わります。Ctrl を押した状態でこのようなリンクをクリックすると、メソッド定義が表示されます。

パラメーターのヒントを設定する

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。
パラメーター名の TypeScript を展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、パラメーター名の TypeScript チェックボックスをオフにします。

戻り型のヒント

PyCharm は、関数呼び出しで関数の戻り値の型を表示し、チェーンを呼び出すことができます。

関数の戻り値のヒントは TypeScript 言語サービスから取得されます。
メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。
メソッドチェーンの戻り値の型のヒントは、内部 PyCharm エバリュエーターによって提供されます。

関数の戻り値のヒントを構成する

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。
タイプで TypeScript ノードを展開し、関数の戻り値の型チェックボックスをオンにします。
メソッドチェーンで戻り値の型のヒントを表示するには、メソッドチェーンノードを展開し、TypeScript チェックボックスを選択します。

プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。

型ヒント

型ヒントは、変数、フィールド、パラメーターの型を示します。変数とフィールドの型は、その定義の横に表示されます。パラメーターの型ヒントは関数呼び出しに表示されます。型ヒントは、Jsdoc コメントまたはコードの静的分析から推論されます。

TypeScript バージョン 5.3 以降では、マウスをホバーするとタイプヒントがリンクに変わります。Ctrl を押しながらこのようなリンクをクリックすると、型定義が表示されます。

型ヒントを構成する

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。
タイプ | TypeScript を展開します。
型アノテーションノードを展開し、型ヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
任意のコンテキストで任意の値の型のパラメーターの型と戻り値の型のヒントを非表示にするには、タイプの TypeScript チェックボックスをオフにします。

数値列挙値

PyCharm は、コードを読みやすくするために数値列挙型(英語)のヒントを表示します。これらのヒントは TypeScript 言語サービスから取得され、デフォルトで表示されます。

数値列挙値を非表示にする

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。
値ノードを展開し、TypeScript チェックボックスを選択します。PyCharm はヒントを非表示にし、明示的に初期化された定数の値のみを表示します。プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。

TypeScript の JavaScript ライブラリ

TypeScript で JavaScript ライブラリを操作する場合、それらの型宣言をインストールする(英語)必要があります。PyCharm は、npm または yarn 経由でインストールすることを通知し、それに応じて package.json ファイルを更新します。

型宣言をインストールする

警告にキャレットを置き、Alt+Enter を押します。
提案を選択し、Enter を押します。

コードの整形

PyCharm を使用すると、現在のコードスタイルスキームに従って TypeScript コードを再フォーマットできます。

.editorconfig でフォーマットを指定したり、Prettier を使用したりすることもできます。

デコレーター

デコレータの場合、再フォーマット中に各デコレータの後に改行を挿入しないようにすることが重要な場合があります。

デコレータを構成する

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コードスタイル | TypeScript に移動します。
折り返しと波括弧タブで、デコレータの種類に関連するオプションを選択します。

デコレータには次のフォーマットオプションが使用できます。

折り返さない

このオプションを選択すると、デコレータを使用して行を再フォーマットするときに折り返しは適用されません。

長い場合は折り返す

このオプションを選択すると、行が右余白を超えると折り返されます。

右余白は、設定 | エディター | コードスタイル | JavaScript | 折り返しと波括弧の次でハードラップフィールドで定義されます。行が指定された数値を超えると、折り返されます。

長い場合は切り捨てる

このオプションを選択すると、デコレータが右余白を超える場合、1 行に 1 つずつフォーマットされます。

常に折り返す

このオプションを選択すると、すべてのデコレータが 1 行に 1 つずつフォーマットされます。

構文のハイライト

好みや習慣に応じて、TypeScript 対応の構文ハイライトを設定できます。

設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | TypeScript に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

コードナビゲーション

さまざまなアクションとポップアップを使用して、PyCharm エディターで TypeScript プロジェクトをすばやく移動できます。

シンボルの宣言に移動

変数、フィールド、メソッド、その他のシンボルからその宣言に移動したり、編集中のコードから移動したりせずに、ポップアップでシンボル定義を表示できます。

シンボルの宣言に移動するには、シンボルの使用箇所にキャレットを置き、Ctrl+B を押すか、メインメニューから移動 | 宣言または使用箇所を選択します。
または、Ctrl+Click を使用します。Ctrl を押したまま、シンボルの上にマウスを置きます。シンボルがハイパーリンクに変わったら、Ctrl を放さずにハイパーリンクをクリックします。
シンボルの定義をポップアップで表示するには、キャレットを使用位置に置き、Ctrl+Shift+I を押すか、メインメニューから表示 | クイック定義を選択します。

シンボルの使用箇所に移動

シンボルの使用箇所のリストを表示して、移動先を選択できます。

シンボルの使用箇所のリストを取得するには、シンボルの宣言にキャレットを置き、次のいずれかを実行します。
- Ctrl+B を押すか、メインメニューから移動 | 宣言または使用箇所を選択します。
- Ctrl+Alt+F7 を押すか、メインメニューから編集 | 使用箇所の検索 | 使用箇所を表示を選択します。
ポップアップで、ツールバーのアイコンを使用してリストの外観を構成し、インポートステートメントなどでの無関係な使用を除外します。
リストから、移動したいシンボルの使用箇所を選択し、Enter を押します。

シンボルの型宣言に移動

変数、フィールド、メソッド、その他のシンボルからその型宣言に移動できます。または、型宣言に移動せずにポップアップで型定義を開きます。

PyCharm は、推測(英語)されたオブジェクトのタイプ(英語)も示します。推測された型情報は、ツールチップまたはドキュメントポップアップで表示できます。

シンボルからその型の宣言に移動するには、シンボルの使用箇所にキャレットを置き、Ctrl+Shift+B を押すか、メインメニューから移動 | 型宣言を選択します。
シンボルの型定義をポップアップで表示するには、型定義を表示するシンボルにキャレットを置き、表示 | クイック型定義を選択します。
クラスのインスタンスの場合、これにより、このインスタンスが定義されている場所ではなく、クラス自体が明らかになります。
PyCharm には、このアクションのデフォルトのキーボードショートカットはありませんが、キーボードショートカットの追加に従って手動で設定できます。

宣言に移動と型宣言に移動の違いに注意してください。次のコードを含む app.ts ファイルがあるとします。

                    import {Dog} from "./dog";

                    let dog = new Dog();
                    dog.bark();
                

dog.bark() の dog にキャレットを置くと、宣言に移動は let dog = new Dog () の変数の宣言に移動し、型宣言に移動はクラス Dog の宣言に移動します。

シンボルの推定型情報を表示する

Ctrl を押したまま、シンボルの上にマウスを置きます。
あるいは、シンボルの上にマウスを置きます。PyCharm は、すぐにドキュメントポップアップにその参照を表示します。
上記のドキュメントの検索から詳細を参照してください。

サブクラス、スーパークラス、オーバーライド、実装の間を移動する

エディターのガターアイコンを使用するか、適切なショートカットを押すことで、クラスの実装とオーバーライドメソッドを追跡できます。

サブクラスに移動

Ctrl+Alt+B を押すか、ガターでをクリックし、リストから関連するクラスを選択します。
または、メインメニューから移動 | 実装またはコンテキストメニューから移動 | 実装を選択し、リストから関連するクラスを選択します。

スーパークラスまたはオーバーライドされたメソッドに移動する

キャレットをサブクラスに置き、Ctrl+U を押します。PyCharm はスーパークラスの宣言に移動し、その名前にキャレットを置きます。
オーバーライドするメソッドの横にあるガターで「」をクリックします。PyCharm は、オーバーライドされたメソッドにキャレットがあるスーパークラスに移動します。
または、オーバーライドメソッドにキャレットを置き、Ctrl+U を押すか、メインメニューから移動 | スーパーメソッドを選択するか、コンテキストメニューから移動 | スーパーメソッドを選択します。

インターフェースまたは実装されたメソッドに移動する

インターフェースの実装にキャレットを置き、Ctrl+U を押します。
PyCharm はインターフェースの宣言に移動し、その名前にキャレットを置きます。
実装メソッドの横にあるガターで「」をクリックします。PyCharm を使用すると、実装されたメソッドのキャレットを含む対応するインターフェースが表示されます。
または、実装メソッドにキャレットを置き、Ctrl+U を押すか、メインメニューから移動 | スーパーメソッドまたはコンテキストメニューから移動 | スーパーメソッドを選択します。

TypeScript でのリファクタリング

PyCharm は、名前の変更 / 移動などの一般的なリファクタリング手順と、シグネチャーの変更、パラメーターの導入、変数の導入などの TypeScript 固有のリファクタリング手順の両方を提供します。詳細については、「名前の変更リファクタリングおよびコピーして移動リファクタリング」を参照してください。

アプリケーションの実行とデバッグ

PyCharm を使用すると、Node.js で実行されているクライアント側の TypeScript コードと TypeScript コードを実行およびデバッグできます。TypeScript の実行とデバッグの詳細を参照してください。

最終更新日: 2025 年 4 月 15 日