TypeScript 概觀

已完成

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 類型指派給參數 xy,而函式傳回了數字。

  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 中找不到的程式碼撰寫功能:

  • 介面
  • 命名空間
  • 泛型
  • 抽象類別
  • 資料修飾元
  • 選用項目
  • 函式多載
  • 裝飾項目
  • 類型公用程式
  • 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,或您的應用程式均可。

JavaScript 與 TypeScript 之間的關聯性圖表,其中 TypeScript 可以直接使用 JavaScript,但必須編譯為 JavaScript。

重要

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

從 JavaScript 移轉至 TypeScript

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

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