編譯 TypeScript 檔案

已完成

如同您先前學習到的,TypeScript 是 ECMAScript 2015 (ECMAScript 6 或 ES6) 的 strict 超集。 所有的 JavaScript 程式碼也是 TypeScript 程式碼,而 TypeScript 程式可順利地取用 JavaScript。 事實上,您只要將副檔名從 .js 重新命名為 .ts 就可以將 JavaScript 檔案轉換成 TypeScript 檔案。

不過,並非所有的 TypeScript 程式碼都是 JavaScript 程式碼。 TypeScript 會將新語法新增至 JavaScript,讓 JavaScript 更容易讀取和實作某些功能,例如靜態類型。 雖然 TypeScript 程式碼可讓開發變得更容易且較不容易出錯,但瀏覽器和大部分其他執行階段原本就不支援 TypeScript。 基於這個理由,TypeScript 需要一個組建步驟 (轉換器) 將其轉換為 JavaScript,讓您的應用程式得以運作。

您可以使用 TypeScript 編譯器將 TypeScript 程式碼轉換成 JavaScript 程式碼,也可以使用與 TypeScript 相容的轉換器,例如 BabelswcSucrase。 這項程序會移除 TypeScript 專用的程式碼 (例如型別宣告和介面)。 此外,它會產生一個乾淨的 JavaScript 檔案,您可以從網頁執行此檔案,其與瀏覽器相容。

編譯 TypeScript 檔案

您可以使用 tsc 命令,在命令提示字元中執行 TypeScript 編譯器。 當您在無參數的情況下執行 tsc 時,它會編譯目前資料夾中的所有 .ts 檔案,並為每個檔案產生 .js 檔案。

您也可以編譯特定的檔案。 例如,若要編譯名稱為 utility_functions 的 TypeScript 檔案,請輸入 tsc utility_functions.ts

注意

您可以自由選擇是否要輸入 ts 副檔名。

如果沒有發生編譯器錯誤,則 tsc 命令會產生名稱為 utility_functions.js 的 JavaScript 檔案。

如果編譯器發現程式碼錯誤,命令視窗就會顯示錯誤。 修正 TypeScript 檔案中的錯誤,然後重新執行 tsc 命令。

編譯器選項

您可以使用編譯器選項,控制從來源 TypeScript 產生 JavaScript 的方法。 您可以在命令提示字元中設定選項 (如同使用許多命令列介面一樣),或在名稱為 tsconfig.js 的 JSON 檔案中設定選項。

有許多編譯器選項可供您使用。 您可以在 tsc 命令列介面文件中找到完整的選項清單。 以下是幾個最常見的選項:

  • noImplicitAny
  • noEmitOnError
  • target
  • 目錄選項

若要控制編譯,您可以搭配 tsc 命令使用下列編譯器選項:

  • --noImplicitAny 選項會指示編譯器在具有隱含 any 類型的運算式和宣告上引發錯誤。 例如:

    tsc utility_functions.ts --noImplicitAny

  • --target 選項會指定 JavaScript 檔案的 ECMAScript 目標版本。 此範例會編譯與 ECMAScript 6 相容的 JavaScript 檔案:

    tsc utility_functions.ts --target "ES2015"

稍後的課程模組中會說明其他編譯器選項。