TypeScript - 環境設定

你好啊，未來的編程超級巨星！我很興奮能成為您踏進 TypeScript 世界的引路人。作為一個教編程多年的老師，我可以告訴您，設定開發環境就像在烹飪美味佳肴前準備廚房一樣。這可能不是最引人注目的部分，但對於順暢和愉快的體驗來說，這是必不可少的。所以，讓我們捋起袖子開始吧！

本地環境設定

在我們深入 TypeScript 的細節之前，我們需要設定我們的本地環境。將這個過程看作是創建您的編程工作空間——一個您將花費大量時間製造驚艷程序的舒適角落。

安裝 Node.js

首先，我們需要安裝 Node.js。也許您會問：“但我們不是在學 TypeScript 嗎？”其實，您完全正確！然而，Node.js 是 TypeScript 依賴的好鄰居，它在很多方面都很有幫助，包括運行我們的 TypeScript 编译器。

按照以下步驟安裝 Node.js：

1. 訪問 Node.js 官方網站（https://nodejs.org/）。
2. 下載推薦給大多數用戶的版本。
3. 運行安裝程序並按照提示操作。
4. 安裝完畢後，打開終端或命令提示符。
5. 鍵入 node -v 並按 Enter 鍵來驗證安裝。

如果您看到了版本號，恭喜您！您已經成功安裝了 Node.js。如果沒有，別擔心——我們都經歷過那個階段。重新檢查安裝步驟或尋求幫助。

現在，我們有了 Node.js，讓我們來安裝 TypeScript：

1. 打開您的終端或命令提示符。
2. 鍵入以下命令並按 Enter 鍵：

npm install -g typescript

這個命令會讓 npm（Node 包管理器）在您的系統上全局安裝 TypeScript。安裝完畢後，您可以通過鍵入以下命令來驗證安裝：

tsc -v

如果您看到了版本號，那麼您已經準備好了！

集成開發環境支持

現在，我們已經安裝了核心工具，該選擇我們的工作空間了——集成開發環境（IDE）。將 IDE 想象成您編程時的瑞士軍刀。這是您將編寫、調試和運行 TypeScript 代碼的地方。

Visual Studio Code

我個人最喜歡的（並且向我所有的學生推薦的）是 Visual Studio Code（VS Code）。它是免費的，功能強大，並且對 TypeScript 有出色的開箱即用的支持。

設定 VS Code 的步驟如下：

1. 訪問 VS Code 網站（https://code.visualstudio.com/）。
2. 下載並安裝適合您操作系統的版本。
3. 安裝完畢後，打開 VS Code。

VS Code 擁有內置的 TypeScript 支持，但讓我們確認一下它是否在使用我們安裝的版本：

1. 創建一個新文件並將其保存為 .ts 擴展名（例如，hello.ts）。
2. 鍵入以下代碼：

let message: string = "Hello, TypeScript!";
console.log(message);

3. 按下 Ctrl + Shift + B（或在 Mac 上按 Cmd + Shift + B）來打開構建任務菜單。
4. 選擇 "tsc: build - tsconfig.json"。
5. 如果系統提示創建 tsconfig.json 文件，選擇 "是"。

這將在您的專案文件夹中創建一個 tsconfig.json 文件，告訴 TypeScript 如何編譯您的代碼。隨著您對 TypeScript 的熟悉，您可以稍後自定義這個文件。

Brackets

雖然 VS Code 是我的首選，但有些學生偏好 Brackets，特別是那些來自網頁設計背景的學生。Brackets 輕量並且專注於網頁技術。

為 TypeScript 設定 Brackets 的步驟如下：

1. 從官方網站下載並安裝 Brackets（http://brackets.io/）。
2. 打開 Brackets 並進入 File > Extension Manager。
3. 搜索 "TypeScript" 並安裝 "Brackets TypeScript" 擴展。
4. 安裝後重啟 Brackets。

現在您可以創建 .ts 文件並開始編寫 TypeScript 代碼！

有用的方法和工具

在您開始 TypeScript 之旅時，以下是一些您將遇到的有用方法和工具的表格：

方法/工具	描述	示例
tsc	TypeScript 编译器命令	tsc hello.ts 將 hello.ts 編譯為 hello.js
tsc --watch	監視文件變化並自動重新編譯	tsc --watch hello.ts
npm init	初始化新的 Node.js 專案	在您的專案文件夹中運行 npm init
tsconfig.json	TypeScript 編譯配置文件	指定編譯器選項和專案設置
console.log()	將輸出打印到控制台	console.log("Hello, World!");
node	運行 JavaScript 文件	node hello.js 運行編譯後的 JS 文件

請記住，這些只是基礎。隨著您的進步，您將發現更多令人興奮的工具和方法！

總結

呼！我們今天涵蓋了很多內容，從安裝 Node.js 到設定 IDE。起初可能會感到有些不知所措，但請相信我，隨著練習，這些都會變得習以為常。

我記得我第一次開始編程時，我花了好幾個小時只是試圖正確設置我的環境。現在，這就像煮早上的咖啡一樣自然（順便說一下，煮咖啡是任何編程會話的必要部分！）。

在我們繼續 TypeScript 的冒險時，請記住，每一位偉大的程序員都是從您現在的位置開始的。關鍵是要保持好奇心，持續實驗，並不怕提問。

在我們的下一課中，我們將編寫我們的第一個 TypeScript 程序，並探索這種語言的一些獨特特性。在此之前，祝您編程愉快，願您的分號總是放在正確的位置！

Credits: Image by storyset