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

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

# 的 TypeScript 教學課程 AWS Cloud9
<a name="sample-typescript"></a>

本教學課程說明如何在 AWS Cloud9 開發環境中使用 TypeScript。

遵循本教學課程並建立此範例可能會導致 AWS 您的帳戶產生費用。其中包括 Amazon EC2 和 Amazon S3 這類服務可能的費用。如需詳細資訊，請參閱 [Amazon EC2 定價](https://aws.amazon.com/ec2/pricing/)和 [Amazon S3 定價](https://aws.amazon.com/s3/pricing/)。

**Topics**
+ [先決條件](#sample-typescript-prereqs)
+ [步驟 1：安裝必要工具](#sample-typescript-install)
+ [步驟 2：新增程式碼](#sample-typescript-code)
+ [步驟 3：執行程式碼](#sample-typescript-run)
+ [步驟 4：在 Node.js 中安裝和設定適用於 JavaScript 的 AWS SDK](#sample-typescript-sdk)
+ [步驟 5：新增 AWS SDK 程式碼](#sample-typescript-sdk-code)
+ [步驟 6：執行 AWS SDK 程式碼](#sample-typescript-sdk-run)
+ [步驟 7：清除](#sample-typescript-clean-up)

## 先決條件
<a name="sample-typescript-prereqs"></a>

在您使用此範例前，請務必確認您的設定符合下列要求：
+ **您必須擁有現有的 AWS Cloud9 EC2 開發環境。**本範例假設您已具備 EC2 環境，且該環境已連線到執行 Amazon Linux 或 Ubuntu Server 的 Amazon EC2 執行個體。如果您有不同類型的環境或作業系統，您可能需要依照此範例的說明來設定相關工具。如需詳細資訊，請參閱[在 中建立環境 AWS Cloud9](create-environment.md)。
+ **您已開啟現有環境的 AWS Cloud9 IDE。**當您開啟環境時，請在 Web 瀏覽器中 AWS Cloud9 開啟該環境的 IDE。如需詳細資訊，請參閱[在 中開啟環境 AWS Cloud9](open-environment.md)。

## 步驟 1：安裝必要工具
<a name="sample-typescript-install"></a>

在此步驟中，您使用節點套件管理工具 (**`npm`**) 安裝 TypeScript。若要安裝 **`npm`**，請使用節點套件管理工具 (**`nvm`**)。如果沒有 **`nvm`**，請先在此步驟中安裝它。

1. 在 IDE AWS Cloud9 的終端機工作階段中，使用 **`--version`**選項執行命令列 TypeScript 編譯器，以確認是否已安裝 TypeScript。(若要啟動新終端機工作階段，請在選單列上，選擇 **Window** (視窗)、**New Terminal** (新增終端機)。如果成功，輸出會包含 TypeScript 版本編號。若已安裝 TypeScript，請直接跳到[步驟 2：新增程式碼](#sample-typescript-code)。

   ```
   tsc --version
   ```

1. 以 ** `--version` ** 選項執行 ** `npm` **，確認是否已安裝 ** `npm` **。如果成功，輸出會包含 ** `npm` ** 版本編號。如果 **`npm`** 已安裝，請直接跳到這個程序的步驟 10，使用 **`npm`** 安裝 TypeScript。

   ```
   npm --version
   ```

1. 執行 **`yum update`** (適用於 Amazon Linux) 或 **`apt update`** (適用於 Ubuntu Server) 命令，協助確保已安裝最新安全性更新和錯誤修正。

   針對 Amazon Linux：

   ```
   sudo yum -y update
   ```

   針對 Ubuntu Server：

   ```
   sudo apt update
   ```

1. 若要安裝 ** `npm` **，請執行以下命令來下載 Node Version Manager (** `nvm` **)。(** `nvm` ** 是一種簡單的 Bash shell 指令碼，適用於安裝和管理 Node.js 版本。如需詳細資訊，請參閱 GitHub 網站的 [Node Version Manager](https://github.com/creationix/nvm/blob/master/README.md)。)

   ```
   curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
   ```

1. 若要開始使用 **`nvm`**，請先關閉終端機工作階段並再次啟動，或是援引 `~/.bashrc` 檔案，其中包含的命令將會載入 **`nvm`**。

   ```
   . ~/.bashrc
   ```

1. 以 ** `--version` ** 選項執行 ** `nvm` **，確認已安裝 ** `nvm` **。

   ```
   nvm --version
   ```

1. 執行 以安裝最新版本的 Node.js ** `nvm` **16。 (** `npm` ** 包含在 Node.js 中。)

   ```
   nvm install v16
   ```

1. 執行 Node.js 命令列版本搭配 **`--version`** 選項，確認已安裝 Node.js。

   ```
   node --version
   ```

1. 以 ** `--version` ** 選項執行 ** `npm` **，確認已安裝 ** `npm` **。

   ```
   npm --version
   ```

1. 執行 **`npm`** 搭配 **`-g`** 選項，安裝 TypeScript。這個動作會在環境中將 TypeScript 安裝為全域套件。

   ```
   npm install -g typescript
   ```

1. 執行命令列 TypeScript 編譯器搭配 **`--version`** 選項，確認 TypeScript 已安裝。

   ```
   tsc --version
   ```

## 步驟 2：新增程式碼
<a name="sample-typescript-code"></a>

1. 在 AWS Cloud9 IDE 中，建立名為 的檔案`hello.ts`。(若要建立檔案，請在選單列上選擇 **File** (檔案)、**New File** (新增檔案)。若要儲存檔案，請選擇 **File** (檔案)、**Save** (儲存)。)

1. 在 IDE 的終端機中，從與 `hello.ts` 檔案的相同目錄執行 **`npm`** 以安裝 `@types/node` 程式庫。

   ```
   npm install @types/node
   ```

   這樣會在與 `node_modules/@types/node` 檔案相同的目錄中新增 `hello.ts` 資料夾。這個新資料夾包含了 TypeScript 在此程序稍後需要的 Node.js 類型定義 (針對將加入 `hello.ts` 檔案中的 `console.log` 和 `process.argv` 屬性)。

1. 將下列程式碼加入到 `hello.ts` 檔案：

   ```
   console.log('Hello, World!');
   
   console.log('The sum of 2 and 3 is 5.');
   
   const sum: number = parseInt(process.argv[2], 10) + parseInt(process.argv[3], 10);
   
   console.log('The sum of ' + process.argv[2] + ' and ' +
     process.argv[3] + ' is ' + sum + '.');
   ```

## 步驟 3：執行程式碼
<a name="sample-typescript-run"></a>

1. 在終端機中，從 `hello.ts` 檔案的相同目錄執行 TypeScript 編譯器。指定 `hello.ts` 檔案和要包含的其他程式庫。

   ```
   tsc hello.ts --lib es6
   ```

   TypeScript 使用 `hello.ts` 檔案和一組 ECMAScript 6 (ES6) 程式庫檔案，將 `hello.ts` 檔案中的 TypeScript 程式碼轉譯為 `hello.js` 檔案中的同等 JavaScript 程式碼。

1. 在 **Environment (環境)** 視窗中開啟 `hello.js` 檔案。

1. 在選單列上，選擇 **Run** (執行)、**Run Configurations** (執行組態)、**New Run Configuration** (新增執行組態)。

1. 在 **[New] - Idle** ([新增] - 閒置) 標籤上，選擇 **Runner: Auto** (執行器: 自動)，然後選擇 **Node.js**。

1. 在 **Command (命令)** 中輸入 `hello.js 5 9`。在程式碼中，`5` 代表 `process.argv[2]`，而 `9` 代表 `process.argv[3]`。(`process.argv[0]` 代表名稱執行時間 (`node`)，而 `process.argv[1]` 代表檔案名稱 (`hello.js`))。

1. 選擇 **Run (執行)**，然後比較您的輸出。完成後，選擇 **Stop (停止)**。

   ```
   Hello, World!
   The sum of 2 and 3 is 5.
   The sum of 5 and 9 is 14.
   ```

![\[在 IDE 中執行程式碼後的 Node.js AWS Cloud9 輸出\]](http://docs.aws.amazon.com/zh_tw/cloud9/latest/user-guide/images/ide-nodejs-simple.png)


**注意**  
除了在 IDE 中建立新的執行組態，您也可以從終端機執行命令 **`node hello.js 5 9`** 來執行此程式碼。

## 步驟 4：在 Node.js 中安裝和設定適用於 JavaScript 的 AWS SDK
<a name="sample-typescript-sdk"></a>

您可以增強此範例，以使用 Node.js 中適用於 JavaScript 的 AWS SDK 來建立 Amazon S3 儲存貯體、列出可用的儲存貯體，然後刪除您剛建立的儲存貯體。

在此步驟中，您會在 Node.js 中安裝和設定適用於 JavaScript 的 AWS SDK。開發套件提供便捷的方式，可讓您透過 JavaScript 程式碼與 Amazon S3 等 AWS 服務互動。在 Node.js 中安裝適用於 JavaScript 的 AWS SDK 之後，您必須在環境中設定登入資料管理。開發套件需要這些登入資料才能與 AWS 服務互動。

### 在 Node.js 中安裝適用於 JavaScript 的 AWS SDK
<a name="sample-typescript-sdk-install-sdk"></a>

在 IDE AWS Cloud9 的終端機工作階段中，從與 `hello.js` 檔案相同的目錄執行 [步驟 3：執行程式碼](#sample-typescript-run)，**`npm`**以在 Node.js 中安裝適用於 JavaScript 的 AWS SDK。

```
npm install aws-sdk
```

此命令會新增數個資料夾到 [步驟 3：執行程式碼](#sample-typescript-run) 中的 `node_modules` 資料夾。這些資料夾包含 Node.js 中適用於 JavaScript 的 AWS SDK 的原始程式碼和相依性。如需詳細資訊，請參閱 *適用於 JavaScript 的 AWS SDK 開發人員指南*.中的[安裝 JavaScript 的 SDK](https://docs.aws.amazon.com/sdk-for-javascript/latest/developer-guide/installing-jssdk.html)

### 在環境中設定憑證管理
<a name="sample-typescript-sdk-creds"></a>

每次在 Node.js 中使用適用於 JavaScript 的 AWS SDK 來呼叫 AWS 服務時，您必須隨呼叫提供一組登入資料。這些登入資料會判斷 Node.js 中適用於 JavaScript 的 AWS SDK 是否具有進行該呼叫的適當許可。如果登入資料未涵蓋適當許可，呼叫即會失敗。

在此步驟中，您會在環境中存放您的憑證。若要這麼做，請遵循 [AWS 服務 從 中的環境呼叫 AWS Cloud9](credentials.md) 中的指示，然後返回本主題。

如需詳細資訊，請參閱 *適用於 JavaScript 的 AWS SDK 開發人員指南*中的[以 Node.js 設定憑證](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/setting-credentials-node.html)。

## 步驟 5：新增 AWS SDK 程式碼
<a name="sample-typescript-sdk-code"></a>

在此步驟中，您會再新增其他程式碼，這次是要與 Amazon S3 互動，藉此建立儲存貯體、列出可用的儲存貯體，然後刪除您剛建立的儲存貯體。您稍後將執行此程式碼。

1. 在 AWS Cloud9 IDE 中，在與先前步驟中`hello.js`檔案相同的目錄中，建立名為 的檔案`s3.ts`。

1. 從 IDE AWS Cloud9 中的終端機，在與 `s3.ts` 檔案相同的目錄中，透過執行**`npm`**兩次以非同步方式啟用程式碼來呼叫 Amazon S3 操作，以安裝 TypeScript 的非同步程式庫，並再次為 JavaScript 安裝非同步程式庫。

   ```
   npm install @types/async # For TypeScript.
   npm install async        # For JavaScript.
   ```

1. 將下列程式碼加入到 `s3.ts` 檔案：

   ```
   import * as async from 'async';
   import * as AWS from 'aws-sdk';
   
   if (process.argv.length < 4) {
     console.log('Usage: node s3.js <the bucket name> <the AWS Region to use>\n' +
       'Example: node s3.js my-test-bucket us-east-2');
     process.exit(1);
   }
   
   const AWS = require('aws-sdk'); // To set the AWS credentials and AWS Region.
   const async = require('async'); // To call AWS operations asynchronously.
   
   const s3: AWS.S3 = new AWS.S3({apiVersion: '2006-03-01'});
   const bucket_name: string = process.argv[2];
   const region: string = process.argv[3];
   
   AWS.config.update({
     region: region
   });
   
   const create_bucket_params: any = {
     Bucket: bucket_name,
     CreateBucketConfiguration: {
       LocationConstraint: region
     }
   };
   
   const delete_bucket_params: any = {
     Bucket: bucket_name
   };
   
   // List all of your available buckets in this AWS Region.
   function listMyBuckets(callback): void {
     s3.listBuckets(function(err, data) {
       if (err) {
   
       } else {
         console.log("My buckets now are:\n");
   
         for (let i: number = 0; i < data.Buckets.length; i++) {
           console.log(data.Buckets[i].Name);
         }
       }
   
       callback(err);
     });
   }
   
   // Create a bucket in this AWS Region.
   function createMyBucket(callback): void {
     console.log("\nCreating a bucket named '" + bucket_name + "'...\n");
   
     s3.createBucket(create_bucket_params, function(err, data) {
       if (err) {
         console.log(err.code + ": " + err.message);
       }
   
       callback(err);
     });
   }
   
   // Delete the bucket you just created.
   function deleteMyBucket(callback): void {
     console.log("\nDeleting the bucket named '" + bucket_name + "'...\n");
   
     s3.deleteBucket(delete_bucket_params, function(err, data) {
       if (err) {
         console.log(err.code + ": " + err.message);
       }
   
       callback(err);
     });
   }
   
   // Call the AWS operations in the following order.
   async.series([
     listMyBuckets,
     createMyBucket,
     listMyBuckets,
     deleteMyBucket,
     listMyBuckets
   ]);
   ```

## 步驟 6：執行 AWS SDK 程式碼
<a name="sample-typescript-sdk-run"></a>

1. 在終端機中，從 `s3.ts` 檔案的相同目錄執行 TypeScript 編譯器。指定 `s3.ts` 檔案和要包含的其他程式庫。

   ```
   tsc s3.ts --lib es6
   ```

   TypeScript 使用 `s3.ts` 檔案、Node.js 中 JavaScript 的 AWS SDK、非同步程式庫和一組 ECMAScript 6 (ES6) 程式庫檔案，將`s3.ts`檔案中的 TypeScript 程式碼轉換為名為 之檔案中的同等 JavaScript 程式碼`s3.js`。

1. 在 **Environment (環境)** 視窗中開啟 `s3.js` 檔案。

1. 在選單列上，選擇 **Run** (執行)、**Run Configurations** (執行組態)、**New Run Configuration** (新增執行組態)。

1. 在 **[New] - Idle** ([新增] - 閒置) 標籤上，選擇 **Runner: Auto** (執行器: 自動)，然後選擇 **Node.js**。

1. 對於**命令**，輸入 `s3.js YOUR_BUCKET_NAME THE_AWS_REGION `，其中 ` YOUR_BUCKET_NAME `是您要建立和刪除的儲存貯體名稱，而 ` THE_AWS_REGION `是要在其中建立儲存貯 AWS 體的區域 ID。例如，若為美國東部 (俄亥俄) 區域，則使用 `us-east-2`。其他區域的 ID 請參閱《[》章節 ](https://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region)Amazon Simple Storage Service (Amazon S3)*Amazon Web Services 一般參考*。
**注意**  
Amazon S3 儲存貯體名稱必須是唯一的 AWS，而不只是您的帳戶 AWS 。

1. 選擇 **Run (執行)**，然後比較您的輸出。完成後，選擇 **Stop (停止)**。

   ```
   My buckets now are:
   
   Creating a new bucket named 'my-test-bucket'...
   
   My buckets now are:
   
   my-test-bucket
   
   Deleting the bucket named 'my-test-bucket'...
   
   My buckets now are:
   ```

## 步驟 7：清除
<a name="sample-typescript-clean-up"></a>

為了避免在您完成使用此範例後持續向您的 AWS 帳戶收取費用，您應該刪除環境。如需說明，請參閱[在 中刪除環境 AWS Cloud9](delete-environment.md)。