CleanMyMac

TypeScript 入門：建立開發環境，並執行第一個 TypeScript 程式

Feature image for TypeScript 入門：建立開發環境，並執行第一個 TypeScript 程式

歡迎來到 TypeScript 的世界，一個讓 JavaScript 面面俱到的超級英雄！在這篇文章中，我們將一探 TypeScript 的奧秘，並學習如何在 macOS 上搭建開發環境和執行 TypeScript 程式。準備好開始吧！

目錄

如何建立 TypeScript 開發環境

在 macOS 上搭建 TypeScript 開發環境就像是準備一頓豐盛的晚餐，你需要一些基本的食材和調味料。這裡，我們的食材包括 Node.js 和一個適當的 TypeScript 配置。

安裝 Node.js

首先，你需要安裝 Node.js。Node.js 就像是廚房中的烤箱，是執行 JavaScript（和 TypeScript）的基本工具。

  1. 前往 Node.js 官網。
  2. 選擇適合 macOS 的版本下載並安裝。

也許你知道什麼是 Homebrew， 那就簡單了。

brew install node

安裝 TypeScript Compiler (tsc)

tsc 即 TypeScript 編譯器，是 TypeScript 生態系統中的關鍵工具。TypeScript 編譯器負責將 TypeScript 程式碼（包含型別註釋和現代 JavaScript 特性）轉換成純 JavaScript 程式碼，這樣的程式碼能夠在任何 JavaScript 環境中執行，比如瀏覽器或 Node.js。

要使用 tsc，你通常會透過 Node.js package manager 在全域或在你的專案中本地安裝 TypeScript。

pnpm add typescript -g

然後運行 tsc 命令，後跟你想編譯的檔案名稱。例如：

tsc hello.ts

以下是 tsc 的主要功能：

  • 編譯：tsc 讀取 TypeScript 檔案（.ts 或包含 JSX 時的 .tsx），並輸出 JavaScript 檔案（.js）。它根據 tsconfig.json 檔案或命令列參數指定的選項進行編譯

  • 型別檢查：在編譯過程中，tsc 會檢查型別錯誤，如果程式碼不符合指定的型別約束，它將發出警告。這一步對於在開發過程早期捕獲錯誤至關重要

  • 配置：您可以使用 tsconfig.json 檔案對編譯器進行微調，其中包括設定哪些檔案包含在內、編譯到哪個版本的 JavaScript、是否產生來源映射（source maps）以便於除錯等

  • 整合：tsc 可以整合到建置過程中，並得到各種 IDE 的支援，提供即時的錯誤資訊和程式碼編寫回饋

初始化 tsconfig

接下來，我們需要初始化 TypeScript 的配置文件 tsconfig.json。這個文件就像是食譜，告訴 TypeScript 如何處理你的代碼。

tsconfig.json 是 TypeScript 專案的配置檔案，它指導 TypeScript 編譯器（tsc）如何編譯 TypeScript 程式碼。這個檔案允許開發者設定編譯選項，並定義哪些檔案應該被包含或排除在編譯過程之外。

打開終端機（Terminal），執行以下命令來初始化 TypeScript 配置：

tsc --init

這會在你的專案目錄中建立一個 tsconfig.json 檔案。

一個基本的 tsconfig.json 可能看起來像這樣：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist"
  }
}

這個配置會告訴 TypeScript 編譯器目標是 ES5 版本的 JavaScript，並使用 CommonJS 模組系統。"strict": true 開啟所有嚴格的型別檢查選項，確保編譯過程中進行嚴格的型別檢查。

如何運行 TypeScript

TypeScript 的世界充滿了多種執行程式碼的方式，就像你可以用不同的烹飪方式來準備一道菜。

使用 node

事實上你無法使用 node 直接執行 TypeScript 程式，必須先使用 tsc 將 TypeScript 編譯成 JavaScript 程式，然後才可以使用 node 執行。

首先，安裝 TypeScript：

pnpm add typescript -g

然後，使用 tsc 編譯你的 TypeScript 文件：

tsc hello.ts

這會生成一個 hello.js 文件。現在，使用 Node.js 運行這個文件：

node hello.js

使用 ts-node

ts-node 是一個方便的工具，可以直接執行 TypeScript 程式碼，無需先將其編譯為 JavaScript。這就像是一個即食餐點，快速且方便。

安裝 ts-node：

pnpm add ts-node -g

然後直接執行你的 TypeScript 檔案：

ts-node hello.ts

TypeScript Playground

如果你不想在本地安裝任何東西，TypeScript Playground 是一個線上沙盒工具，讓你可以寫 TypeScript 並即時看到結果。

訪問 TypeScript Playground 並開始玩轉 TypeScript！

Deno

Deno 是一個現代的 JavaScript/TypeScript 執行環境，內建了很多好玩的特性。它就像是一個高科技廚房，擁有你需要的一切。

安裝 Deno：

pnpm add deno -g

然後，編寫你的第一個 TypeScript 程式，並使用 Deno 執行它。

Deno 會自動處理 TypeScript 的編譯工作。

// hello.ts
console.log("Hello from Deno!");

執行它：

deno run hello.ts

Bun

Bun 是一個新興的 JavaScript 執行環境，專注於效能和開發者體驗。想像一下，一個超級充電的廚房機器人幫助你烹飪！

安裝 Bun：

pnpm add bun -g

編寫你的 TypeScript 程式：

// hello.ts
console.log("Hello from Bun!");

使用 Bun 執行它：

bun run hello.ts

恭喜你，你已經完成了 TypeScript 的入門課程！現在，你可以開始探索這個強大語言的更多可能性了。記住，編程就像烹飪一樣，要不斷嘗試新的配方和工具。祝你在 TypeScript 的旅程中玩得開心！ 🚀🎉