TypeScript のサポートと機能の強化

IDE を使用すると、言語プロジェクトを使用して TypeScript AWS Cloud9 の生産性向上機能にアクセスできます。言語プロジェクトは、 AWS Cloud9 開発環境の IDE 内の関連ファイル、フォルダ、および設定のコレクションです。

IDE を使用して環境で言語プロジェクトを作成するには、「言語プロジェクトの作成」を参照してください。

使用可能なプロジェクト生産性向上機能

IDE には、TypeScript AWS Cloud9 の以下のプロジェクト生産性機能が用意されています。

自動入力

エディタでファイルに入力するときに、コンテキストに応じた記号 (ある場合) のリストが挿入ポイントに表示されます。

リストの記号を挿入ポイントに挿入するには、上矢印キーまたは下矢印キーを使用して記号を選択し (まだ選択されていない場合)、Tab キーを押します。

Tab キーを押す前に、選択した記号に関するヒント情報が表示されます。

記号を挿入しないでリストを閉じるには、Esc キーを押します。

ガーターアイコン

アクティブなファイルでガーターにアイコンが表示される場合があります。これらのアイコンは、コードを実行する前にコード内に問題が検出された場合、これらの問題を警告やエラーとして示します。

問題の詳細を確認するには、問題のアイコン上でポインタを一時停止します。

Quick Fixes (簡易修正)

エディタのアクティブなファイルで、コーディングのエラーおよび警告に関する情報とそのコードに自動的に適用できる有効な修正を表示できます。エラーまたは警告の情報と有効な修正を表示するには、赤の点線の下線 (エラーの場合) またはグレーの点線の下線 (警告の場合) があるコードの一部を選択します。または、赤またはグレーの点線の下線があるコードにカーソルを置いたまま、Option-Enter (macOS の場合) または Alt-Enter (Linux または Windows の場合) を押します。提案された修正を適用するには、リストの修正を選択するか、矢印キーを使用して修正を選択して Enter キーを押します。簡易修正のオン/オフをマウスのクリックで切り替えるには、AWS Cloud9、［設定］、［User Settings (ユーザー設定)］、［言語］、［Hints & Warnings (ヒントと警告)］、［Show Available Quick Fixes on Click (クリックで利用可能な簡易修正を表示)］の順に選択します。

Find References (リファレンスの検索)

エディタのアクティブなファイルで、挿入ポイントにある記号に関するすべてのリファレンスを表示できます (これらのリファレンスにIDE からアクセスできる場合)。

これを行うには、挿入ポイントになる記号の内部で Find References コマンドを実行します。例:

• 挿入ポイントで右クリックし、［Find References (リファレンスの検索)］を選択します。

• メニューバーで、［Go (移動)］、［Find References (リファレンスの検索)］の順に選択します。

• macOS、Windows、Linux で、デフォルトの Shift-F3 を押します。

リファレンスが利用可能である場合は、アクティブなファイル上にペインが (記号の横に) 表示されます。ペインには、この記号のリファレンスがあるファイルのリストが含まれています。ペインにはリストの最初のリファレンスが表示されます。別のリファレンスを表示するには、そのリファレンスをリストで選択します。

ペインを閉じるには、ペインの閉じる (X) アイコンを選択するか、Esc キーを押します。

以下の場合は、Find References コマンドが無効であるか、正常に機能しない場合があります。

• アクティブファイルのプロジェクトに、その記号に関するリファレンスがない場合。

• アクティブなファイルのプロジェクトで、IDE が記号のリファレンスの一部またはすべてを見つけることができない場合。

• IDE が、アクティブなファイルのプロジェクトで記号のリファレンス場所にアクセスできない場合。

Go to Definition (定義に移動)

エディタのアクティブなファイルで、記号からその記号の定義場所に移動できます (IDE がその定義にアクセスできる場合)。

これを行うには、挿入ポイントになる記号の内部で Jump to Definition コマンドを実行します。例:

• 挿入ポイントで右クリックし、［Jump to Definition (定義に移動)］を選択します。

• メニューバーで、［Go (移動)］、［Jump to Definition (定義に移動)］を選択します。

• macOS、Windows、Linux で、デフォルトの F3 を押します。

定義が利用可能な場合は、その定義が別のファイルにある場合でも、挿入ポイントに定義が表示されます。

以下の場合は、Jump to Definition コマンドが無効であるか、正常に機能しない場合があります。

• 記号が該当言語のプリミティブシンボルである場合。

• アクティブなファイルのプロジェクトで IDE が定義場所を見つられない場合。

• アクティブなファイルのプロジェクトで IDE が定義場所にアクセスできない場合。

Go to Symbol (記号に移動)

プロジェクト内の特定の記号に移動できます。方法は次のとおりです。

1. プロジェクトのいずれかのファイルをエディタで開いてアクティブにします。ファイルがすでに開いている場合は、そのタブをエディタで選択し、ファイルをアクティブにします。

2. Go to Symbol コマンドを実行します。例:

   • ウィンドウの［Go (移動)］ボタン (虫眼鏡アイコン) を選択します。［Go to Anything (どこにでも移動)］ボックスに、「@」と入力し、記号の入力を開始します。

   • メニューバーで、［Go (移動)］、［Go To Symbol (記号に移動)］を選択します。［Go (移動)］ウィンドウで、［@］に続けて記号の入力を開始します。

   • macOS でデフォルトの Command-2 または Command-Shift-O を押します。Windows/Linux ではデフォルトの Ctrl-Shift-O を押します。［Go (移動)］ウィンドウで、［@］に続けて記号の入力を開始します。

   例えば、プロジェクトで toString という名前の記号をすべて見つけるには、@toString の入力を開始します (または、@ が既に表示されている場合、@ の後に toString の入力を開始します)。

3. 目的の記号が［Symbols (記号)］リストに表示されている場合は、その記号をクリックして選択します。または上矢印キー/下矢印キーを使用して記号を選択し、Enter キーを押します。挿入ポイントがその記号に切り替わります。

移動先の記号がアクティブなファイルのプロジェクトに存在しない場合、この手順は正常に動作しないことがあります。

言語プロジェクトの作成

AWS Cloud9 IDE でサポートされているプロジェクトの生産性向上機能で動作する言語プロジェクトを作成するには、次の手順に従います。

注記

サポートされているプロジェクト生産性向上機能は、言語プロジェクトの一部であるファイルで使用することをお勧めします。サポートされているプロジェクト生産性向上機能は、言語プロジェクトの一部ではないファイルでも使用できますが、予期しない結果になることがあります。

たとえば、IDE を使用して、プロジェクトのパートではない環境のルートレベルにあるファイル内からリファレンスや定義を検索するとします。この場合、IDE が検索する対象は同じルートレベルにあるファイルに限定される可能性があります。その結果、同じ環境内でどこかにある言語プロジェクトで実際にリファレンスや定義が存在するにもかからわず、リファレンスや定義が見つからないという結果になる場合があります。

TypeScript 言語プロジェクトの作成

1. 環境に TypeScript がインストールされていることを確認します。詳細については、「ステップ 1: 必要なツールをインストールする」の「の TypeScript チュートリアル AWS Cloud9」を参照してください。

2. IDE における環境のターミナルセッションから、プロジェクトを作成したいディレクトリに切り替えます。このディレクトリが存在しない場合は、作成してから切り替えます。たとえば、以下のコマンドでは、 (~/environment 内の)環境のルートにディレクトリ (my-demo-project) を作成し、このディレクトリに切り替えます。

   mkdir ~/environment/my-demo-project
   cd ~/environment/my-demo-project

3. プロジェクトを作成する先のディレクトリのルートで、--init オプションを指定して TypeScript コンパイラーを実行します。

   tsc --init

   このコマンドが成功すると、TypeScript コンパイラーにより、プロジェクトのディレクトリのルートに tsconfig.json ファイルが作成されます。このファイルを使用してさまざまなプロジェクト設定を定義できます。たとえば、TypeScript コンパイラーのオプション、プロジェクトに含めるファイル、プロジェクトから除外するファイルなどを定義できます。

   tsconfig.json の詳細については、以下を参照してください。

   • tsconfig.json Overview (TypeScript ウェブサイト)

   • tsconfig.json Schema (json.schemastore.org ウェブサイト)