

 AWS Cloud9 不再提供給新客戶。 AWS Cloud9 的現有客戶可以繼續正常使用該服務。[進一步了解](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/)

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 增強型 TypeScript 支援和功能
<a name="projects"></a>

IDE AWS Cloud9 可讓您使用*語言專案*來存取 TypeScript 的增強生產力功能。語言專案是 AWS Cloud9 IDE 中開發環境的相關檔案、資料夾和設定的集合。

若要使用 IDE 在環境中建立語言專案，請參閱[建立語言專案](#projects-create)。

## 可用的專案生產力功能
<a name="projects-features"></a>

IDE 為 TypeScript AWS Cloud9 提供下列專案生產力功能。

### 自動完成
<a name="projects-features-autocomplete"></a>

隨著您在編輯器輸入於檔案，該內容的插入點處會顯示符號清單，如果有任何符號的話。

若要在插入點插入來自清單的符號，如果尚未選擇符號，請加以選擇，方法是使用向上或向下鍵，然後按下 `Tab`。

按下 `Tab` 之前，您可能會看到內含您選擇符號相關資訊的工具提示，如果有提供資訊的話。

若要關閉清單而不插入符號，請按下 `Esc`。

### 裝訂邊圖示
<a name="projects-features-gutter-icons"></a>

圖示可能出現於作用中檔案的裝訂線。這些圖示強調可能的問題，例執行程式碼前出現警告和錯誤訊息。

如需與問題相關的詳細資訊，請將指標暫停在問題圖示上。

### 快速修復
<a name="projects-features-quick-fixes"></a>

在編輯器中有效的檔案中，您可以顯示有關編碼錯誤和警告的資訊，以及您可自動套用到該程式碼的可能修復方式。若要顯示錯誤或警告資訊和可能修復的方式，請選擇具有紅色虛線底線 (錯誤) 或灰色虛線底線 (警告) 之程式碼的任何部分。或者，將游標置於具有紅色或灰色虛線底線的程式碼上，按 `Option-Enter` (適用於 macOS) 或 `Alt-Enter` (適用於 Linux 或 Windows)。若要將建議修復，選擇清單中的修復，或使用方向鍵來選取修復，然後按 `Enter`。若要開啟或關閉以滑鼠點選方式選擇快速修復，請選擇 **AWS Cloud9**、**Preferences** (偏好設定)、**User Settings** (使用者設定)、**Language** (語言)、**Hints & Warnings** (提示與警告)、**Show Available Quick Fixes on Click** (按一下時顯示可用的快速修復)。

### 尋找參考
<a name="projects-features-find-refs"></a>

如果 IDE 可存取插入點符號的所有參考，則您可以在編輯器的作用中檔案顯示這些參考。

若要這樣做，在插入點的任何符號內，執行 ** `Find References` ** 命令。例如：
+ 在插入點按一下滑鼠右鍵，然後選擇 **Find References (尋找參考)**。
+ 從選單列選擇 **Go, Find References (執行、尋找參考)**。
+ 依預設，針對 macOS、Windows 或 Linux 按下 `Shift-F3`。

如果有提供參考資料，在該符號旁的作用中檔案頂部會開啟一個窗格。窗格包含符號所參考的檔案的清單。窗格顯示清單中的第一個參考。要顯示不同的參考，請在清單中選擇該參考。

若要關閉窗格中，請在窗格中選擇關閉 (**X**) 圖示，或按下 `Esc`。

在以下條件下，** `Find References` ** 命令可能會停用，也可能不會如預期運作：
+ 在作用中檔案的專案中，沒有該符號的參考。
+ IDE 在作用中檔案的專案中找不到該符號的部分或全部參考。
+ IDE 無法在作用中檔案的專案中存取一或多個符號的參考位置。

### Go to Definition (移至定義)
<a name="projects-features-go-to-def"></a>

如果 IDE 可存取符號定義，則在編輯器的作用中檔案，您可以從某個符號前往該符號定義之處。

若要這樣做，在插入點的任何符號內，執行 ** `Jump to Definition` ** 命令。例如：
+ 在插入點按一下滑鼠右鍵，然後選擇 **Jump to Definition (跳至定義)**。
+ 在選單列中，選擇 **Go, Jump to Definition (執行，跳到定義)**。
+ 依預設，針對 macOS、Windows 或 Linux 按下 `F3`。

如果有提供定義，插入點會切換到該定義，即使該定義是在不同的檔案。

在以下條件下，** `Jump to Definition` ** 命令可能會停用，也可能不會如預期運作：
+ 該符號是該語言的基本符號。
+ IDE 在作用中檔案的專案中找不到定義的位置。
+ IDE 在作用中檔案的專案中無法存取定義的位置。

### Go to Symbol (移至符號)
<a name="projects-features-go-to-symbol"></a>

您可以在專案中移至特定的符號，如下所示。

1. 在編輯器開啟檔案，使檔案成為專案中其中一個作用中檔案。如果檔案已開啟，請在編輯器中選擇檔案的標籤，使其處於作用中狀態。

1. 執行 ** `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`)。

1. 如果您看到了您要納入**符號**清單的符號，請按一下以選擇該符號。或者使用向上或向下鍵加以選取，然後按下 `Enter`。插入點之後切換到該符號。

如果您想要移往的符號不在作用中檔案的專案中，此程序可能未如預期正常運作。

## 建立語言專案
<a name="projects-create"></a>

使用下列程序來建立語言專案，以使用 IDE AWS Cloud9 中支援的專案生產力功能。

**注意**  
我們建議您使用檔案的受支援專案生產力功能，其為語言專案的一部分。雖然您可以使用不屬於專案之檔案上一些支援的檔案專案生產力功能，但這些功能可能會造成意外結果。  
例如，您可能會使用 IDE 在不屬於專案的環境根層級中搜尋檔案內的參考和定義。然後，IDE 可能會只搜尋在相同根層級的檔案。這可能會導致您找不到參考或定義，即使這些參考或定義實際存在於相同環境的語言專案中。

### 建立 TypeScript 語言專案
<a name="projects-create-typescript"></a>

1. 確認您已在環境安裝 TypeScript。如需詳細資訊，請參閱 [的 TypeScript 教學課程 AWS Cloud9](sample-typescript.md) 中的 [步驟 1：安裝必要工具](sample-typescript.md#sample-typescript-install)。

1. 在環境的 IDE 中從終端機目錄工作階段切換到您要建立專案的目錄。如果該目錄不存在，請建立它，然後切換到該處。舉例來說，以下命令會在環境的根 (在 `~/environment`) 建立名為 `my-demo-project` 的目錄，然後切換到該目錄。

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

1. 在您要建立專案所在的根目錄，使用 ** `--init` ** 選項執行 TypeScript 編譯器。

   ```
   tsc --init
   ```

   如果此命令成功，TypeScript 編譯器會在專案的根目錄中建立 `tsconfig.json` 檔案。您可以使用此檔案定義各種專案設定，例如 TypeScript 編譯器選項和特定檔案，以包含或從專案排除。

   如需 `tsconfig.json` 檔案的詳細資訊，請參閱以下項目：
   +  TypeScript 網站上的 [tsconfig.json 概觀](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)。
   +  json.schemastore.org 網站上的 [tsconfig.json 結構描述](http://json.schemastore.org/tsconfig)。