設置開發環境

1. VSCode

如果還沒有安裝過文字編輯器，推薦可以使用免費開源的 VSCode(Visual Studio Code)，它與 TypeScript 都是由微軟開發的，並且有豐富的擴展和內建的 TypeScript 支援。（點此連結到官網下載頁面）

2. 設置 nvm 環境（可選）

雖然 nvm 環境並非必要，但如果需要在不同專案間切換 node.js 版本，則建議安裝。

Windows 使用者可以到這個網址，找到nvm-setup.exe下載安裝包，按照安裝精靈就可順利安裝至您的電腦。

完成後，開啟新的終端機，並輸入以下指令確認是否安裝成功：

nvm -v

如果輸出 1.1.12 (目前最新的版本)，即代表成功。

3. 下載 Node.js(LTS)

Node.js 是執行 JavaScript 和 TypeScript 代碼的基礎環境。在設置 TypeScript 前，需要確定已經安裝 Node.js 的 LTS 版本。

• 確認 Node.js 是否已安裝：

node -v

• 若已安裝，可檢查目前使用的 Node.js 版本：

nvm ls

• 使用指令確認可安裝的 Node.js 版本：

nvm list available

指令輸入後的結果只是一部份，詳細資訊則可在官網上確認。

若尚未安裝或非安裝 LTS 版本，可到官網按照指示安裝，或者直接執行指令安裝最新的 LTS 版本：

nvm install lts

4. 安裝 npm

Node Package Manager (npm) 是 Node.js 的套件管理工具，通常會與 Node.js 一起安裝。

可先行確認是否已安裝與目前安裝的版號：

npm -v

設定 typescript 環境

1. 安裝 TypeScript 編譯器(tsc)

因為 TypeScript 需基於 Node 的環境下才能使用，並轉譯成瀏覽器可識別的 JavaScript。

使用 npm 全域安裝 TypeScript 編譯器：

npm install -g typescript

驗證是否安裝成功與目前的版本號：

tsc -v

官方公布的版本資訊可點此確認。

使用 TypeScript 來 Say Hello world!

1. 新建一個 TypeScript 專案

mkdir hello-typescript
cd hello-typescript

2. 打開程式碼編輯器，初始化專案

執行以下指令，完成後將會自動創建一個名為 package.json 的文件。

npm init -y

3. 在此專案安裝 TypeScript

安裝 TypeScript 編譯器作為開發依賴：

npm install typescript --save-dev

4. 創建（初始化）tsconfig.json

執行完成後，會自動創建一個名為 tsconfig.json 的文件，用來設置 TypeScript 的編譯選項，後續有需要也可以客製化調整。

npx tsc --init

5. 新增 src 目錄，並在裡面新增 index.ts 檔案

宣告一個變數，並將其打印。

// src/index.ts
const message: string = 'Hello World!';
console.log(message);

6. 編譯 TypeScript

以下指令會根據 tsconfig.json 中的配置編譯 TypeScript 程式碼。

npx tsc

如果你的檔案中沒有特別設定，例如是 // "outDir": "./", /* Specify an output folder for all emitted files. */，則在執行完此指令後，src/index.ts 會被編譯成 src/index.js。

7. 執行編譯後的 JavaScript 吧！

node src/index.js

成功的話，就會看到在終端機成功印出 Hello World!