如何即時編譯 .ts 檔案並自動更新更改？

---

TypeScript 是一種流行的程式語言，廣泛用於開發大型應用程式。它是 JavaScript 的超集，為語言添加了可選的靜態型別、介面和泛型。在使用 TypeScript 時，擁有一個流暢的開發工作流程至關重要，其中包括自動編譯 .ts 檔案並即時更新更改。

在本文中，我們將探討可用於實現此目標的不同工具和技術。

為什麼要自動編譯 TypeScript 檔案？

在 TypeScript 專案中工作時，開發人員經常更改 .ts 檔案。在進行更改後，他們必須編譯這些檔案以獲得相應的 JavaScript 檔案。手動編譯 TypeScript 檔案可能是一項耗時的任務，尤其是在專案包含許多檔案時。

這就是自動編譯派上用場的地方。自動編譯可以透過即時編譯 TypeScript 檔案來節省開發人員的時間和精力。這意味著每次開發人員儲存對 TypeScript 檔案的更改時，該檔案都會自動編譯成相應的 JavaScript 檔案。

語法

使用即時更改自動編譯 TypeScript 檔案的語法取決於您選擇的工具或庫。通常，語法涉及執行命令或設定配置檔案以監視 .ts 檔案中的更改，然後自動編譯它們。以下是一般語法：

命令列 -

tsc --watch [path/to/ts/files]

配置檔案 -

{
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "dist"
   },
   "include": [
      "src/**/*"
   ],
   "exclude": [
      "node_modules"
   ]
}

用於自動編譯 .ts 檔案的不同工具

讓我們看看一些可用於自動編譯 TypeScript 檔案並即時更新更改的流行工具和庫。

工具 1：TypeScript 編譯器 (tsc)

TypeScript 編譯器 (tsc) 是隨 TypeScript 安裝提供的官方 TypeScript 編譯器。它可以用於將 TypeScript 檔案編譯成 JavaScript 檔案。--watch 選項可與 tsc 一起使用，以監視 .ts 檔案中的更改，然後自動編譯它們。以下是一個示例：

命令列 -

tsc --watch src/app.ts

此命令將監視位於 src 目錄中的 app.ts 檔案中的更改，並在進行更改時自動編譯它。編譯後的 JavaScript 檔案將輸出到同一目錄。

示例 1

使用以下命令建立 src/app.ts 和 tsconfig.json 檔案

touch src/app.ts && tsc --init

現在，啟動終端/命令提示符並執行以下命令以監視 src/app.ts 檔案中儲存的更改

tsc –w 

src/app.ts

class Person {
   name: string
   age: number

   constructor(name: string, age: number){
      this.name = name
      this.age = age
   }
   sayHello() {
      console.log(`Hello ${this.name}`)
      console.log(`You are ${this.age} year(s) old.`)
   }
}

const firstPerson = new Person("Aditya", 21)
firstPerson.sayHello()

透過此配置，.ts 檔案的更改將即時自動與 .js 檔案同步。

現在，為了檢查這些更改是否正在發生，我們將使用 nodemon 在 .js 檔案自動更改時重新執行檔案。

nodemon src/app.js

最終輸出

我們在終端中獲得的輸出為：

Hello Aditya
You are 19 year(s) old. 

工具 2：Webpack

Webpack 是現代 Web 開發中流行的構建工具，可用於捆綁和最佳化 JavaScript 檔案，但它還透過使用載入器內建支援 TypeScript。Webpack 在後臺使用 tsc 來轉譯 .ts 檔案。ts-loader 用作 webpack 和 tsc 之間的粘合劑。因此，您仍然需要您的 tsconfig.json 檔案。

示例 2

我們將基於前面的示例，並使用 Webpack 來轉譯 TS 檔案並自動捆綁 JS 檔案。

要使用 webpack 將 TS 檔案轉譯為 JS 檔案，您需要安裝必要的依賴項，包括 webpack、webpack-cli 和 ts-loader：

npm install webpack webpack-cli ts-loader

安裝完這些依賴項後，您可以在專案目錄中建立 Webpack 配置檔案 webpack.config.js。這是一個示例配置檔案：

配置檔案 (webpack.config.js) -

const path = require('path');
module.exports = {
   entry: './src/app.ts',
   mode: 'development',
   devtool: 'inline-source-map',
   watch: true,
   output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
   },
   resolve: {
      extensions: ['.ts', '.js'],
   },
   module: {
      rules: [{
         test: /\.ts$/,
         use: 'ts-loader',
         exclude: /node_modules/,
      },],
   },
};

在此配置檔案中，entry 屬性指定應用程式的入口點，它是一個 TypeScript 檔案（在此示例中為 app.ts）。mode 屬性指定構建模式（在此示例中為 development），devtool 屬性指定源對映型別。output 屬性指定輸出檔名和目錄，resolve 屬性指定要解析的副檔名。最後，module 屬性指定用於不同檔案型別的載入器，包括用於 TS 檔案的 ts-loader。

設定為 true 的 watch 選項指定 Webpack 在後臺執行並在檢測到 .ts 檔案中的儲存更改時自動編譯。

此影像顯示了目錄結構和 src/app.ts 檔案的內容。不用擔心，在啟動捆綁過程後，dist 目錄將自動建立。

現在執行以下命令以啟動 webpack 捆綁過程：

npx webpack

這將即時自動將您的 TS 檔案轉譯為 JS 檔案，並在您對 TS 檔案進行更改時建立一個 dist/bundle.js 檔案，並且為了檢視更改，我們將使用 nodemon。

nodemon dist/bundle.js

轉譯後的 JS 捆綁包位於 dist/bundle.js 檔案中，如 webpack 配置所指定。

輸出

我們在終端中獲得的輸出為：

Hello Aditya
You are 19 year(s) old. 

結論

自動編譯 TypeScript 檔案並即時更新更改可以在開發過程中為開發人員節省大量時間和精力。有幾個可用的工具和庫可以幫助實現這一點。TypeScript 編譯器 (tsc)、Webpack 和 Gulp 是一些可以用於自動編譯 TypeScript 檔案並即時更新更改的流行選擇。我們在本文中討論了其中的兩種工具。

每個工具都有其自己的語法和配置選項，因此選擇最適合您需求的工具非常重要。無論您是在處理小型專案還是大型應用程式，擁有一個流暢的開發工作流程（包括自動編譯）都可以幫助提高生產力和減少錯誤。