TypeScript サポートと機能の強化

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

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

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

AWS Cloud9 IDE には、 のプロジェクト生産性に関する以下の機能があります TypeScript。

自動入力

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

リストの記号を挿入ポイントに挿入するには、上矢印キーまたは下矢印キーを使用して記号を選択し (まだ選択されていない場合)、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 には、そのシンボルがアクティブなファイルのプロジェクトで参照されている 1 つ以上の場所へのアクセス権がありません。

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

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 の詳細については、以下を参照してください。

   • TypeScript ウェブサイトの tsconfig.json 概要。

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