TypeScript 概觀

  • 5 分鐘

JavaScript 是世界上最常用的程式設計語言之一，也可說是網路的官方語言。 開發人員會使用此語言來撰寫跨平台的應用程式，以在任何平台和任何瀏覽器中執行。

雖然 JavaScript 可用來建立跨平台應用程式，但其設想用意並非針對具有成千或上百萬行程式碼的大型應用程式。 JavaScript 缺乏更成熟語言的一些功能，因此無法支援當今複雜的應用程式。 使用整合式開發編輯器 (IDE) 管理 JavaScript 和維護這些大型程式碼基底時，可能會有困難。

TypeScript 有效解決 JavaScript 的限制，同時保全 JavaScript 能夠在任何地方以及每個平台、瀏覽器或主機上執行程式碼的重要價值主張。

什麼是 TypeScript？

TypeScript 是 Microsoft 所開發的開放原始碼語言。 它是 JavaScript 的超集，這表示您可以發揮已具備的 JavaScript 技能，並與先前無法使用的某些功能一起使用。

類型提示

TypeScript 的類型系統是主要核心功能。 在 TypeScript 中，您可以使用「類型提示」來識別變數或參數的資料類型。 使用類型提示時，您只需描述物件的形狀，即可提供更好的文件，並讓 TypeScript 驗證您的程式碼是否正常運作。

TypeScript 可透過靜態類型檢查，在開發初期就找出程式碼問題，反之，JavaScript 通常要等到程式碼在瀏覽器中執行才能找出這類問題。 您也可以使用類型來描述程式碼的用途。 如果您是在小組中工作，接手組員也能很快了解您的程式碼。

類型也可強化開發工具的智慧和生產力優勢，例如 IntelliSense、以符號為基礎的導覽、移至定義、尋找所有參考、陳述式完成和程式碼重構。

在 TypeScript 中，您可自由選擇是否使用撰寫類型，因為「型別推斷」可讓您不需撰寫額外程式碼，即可取得強大的功能。 如果 TypeScript 可以隱含地判斷資料類型 (例如，當您使用 let age = 42 將值指派給變數時)，即會自動推斷資料類型。

試試看！ 了解類型

讓我們來看看示範類型使用方法的範例。

  1. 開啟 TypeScript 遊樂場。 您將會在本課程模組的稍後部分了解遊樂場。

  2. 將下列 JavaScript 程式碼範例複製並貼到 TypeScript (左側) 窗格中：

    function addNumbers(x, y) {
  return x + y;
}

console.log(addNumbers(3, 6));

    請注意，相同的程式碼會出現在 .JS (右側) 窗格。 此窗格顯示 TypeScript 在編譯後產生的 JavaScript 程式碼。

  3. 選取 [執行] 以執行 JavaScript 程式碼。 然後，選取 [記錄] 索引標籤，並注意系統會將 9 值記錄到主控台。 JavaScript 已將 number 類型指派給參數 x 和 y，而函式傳回了數字。

  4. 將 TypeScript 程式碼中的 3 取代為 "three" (包括引號)，然後加以執行。 JavaScript 現在會將 string 類型指派給 x 參數，並將字串類型 "three6" 傳回給主控台。 您之前可能遇到過這種情況，也知道這可能會導致一些非預期的結果。

    在 [TypeScript] 窗格中，請注意 addNumbers 函式中參數名稱下的紅色曲線。 該線表示類型檢查程式已識別出錯誤。 將滑鼠停留在其中一個參數上，並讀取錯誤的描述。 TypeScript 已隱含指派 any 類型，這是最廣泛的類型，因為它基本上可以包含所有項目。

  5. 更新 TypeScript 程式碼，以指定每個參數的類型。 將 x 取代為 x: number；將 y 取代為 y: number。

    您會發現參數現已不再顯示這些錯誤，但函式呼叫中的第一個引數底下出現了新的錯誤：「'string' 類型的引數無法指派給 'number' 類型的參數。」

  6. 將 "three" 取代為數字以更正錯誤。 您可以傳遞常值、變數或任何其他資料。 TypeScript 理解物件的形狀，因此能夠在開發期間通知您有關類型的衝突。

  7. 檢閱 JavaScript，並注意它沒有任何變更。 TypeScript 可以在開發期間提供類型檢查，但因為 JavaScript 不支援類型，所以這不會對其產生的程式碼有任何影響。

TypeScript 的其他程式碼功能

TypeScript 具有 JavaScript 無法提供的其他程式碼撰寫功能：

  • 介面
  • 命名空間
  • 泛型
  • 抽象類別
  • 資料修飾元
  • 選用項目
  • 函式多載
  • 裝飾項目
  • 類型 utils
  • readonly 關鍵字

您將在稍後的課程模組中進一步了解這些功能。

TypeScript 與 JavaScript 的相容性

TypeScript 是 ECMAScript 2015 (ECMAScript 6 或 ES6) 的 strict 超集。 此關聯性表示所有的 JavaScript 程式碼也是 TypeScript 程式碼，而 TypeScript 程式可順利地取用 JavaScript。

瀏覽器只能了解 JavaScript。 為了讓您的應用程式得以運作，使用 TypeScript 撰寫時，請編譯程式碼，並將其轉換為 JavaScript。 您可以使用 TypeScript 編譯器或與 TypeScript 相容的轉換器，將 TypeScript 程式碼轉換成 JavaScript 程式碼。 產生的 JavaScript 是簡潔、簡單的程式碼，可在 JavaScript 執行的任何位置執行，包括瀏覽器、Node.js，或您的應用程式均可。

Diagram of the relationship between JavaScript and TypeScript, where TypeScript can use JavaScript directly but must be compiled to become JavaScript.

重要

當您使用 TypeScript 時，請記住，在幾乎所有情況下，TypeScript 都會編譯 (或轉換) 為 JavaScript，而 JavaScript 實際上是由執行階段執行。 您可以在使用 JavaScript 的「所有」專案上使用 TypeScript。

從 JavaScript 移轉至 TypeScript

採用 TypeScript 並非二選一的選項，因此您可以逐漸移轉程式碼基底。 您可以先使用 JSDoc 來標註現有的 JavaScript，然後切換一些檔案供 TypeScript 檢查。 您可以花一段時間準備程式碼基底，以完整轉換。

如需這項程序的詳細資訊，請參閱 TypeScript 教學課程：從 JavaScript 移轉。