TypeScript：TSConfig 選項入門

什麼是 TypeScript？

TypeScript 是 JavaScript 的超集。這意味著您可以在 TypeScript 中使用 JavaScript 語法，因此最好在開始使用 TypeScript 之前學習 JavaScript。有了這個免責聲明，讓我們來談談 TypeScript 是什麼以及如何為 TypeScript 設定專案。

根據TypeScript 的文檔，「TypeScript 是一種基於JavaScript 構建的強類型程式語言。」[1] TypeScript 語言添加了類型語法來幫助您在開發過程中及早發現錯誤，並在開發團隊成長的過程中保持保障措施隨著專案規模的擴大。 TypeScript 可讓您定義變數的資料類型和物件的介面。 TypeScript 使用這些定義來檢查您的程式碼在編譯時是否有錯誤，並在您不遵循事先設定的定義時通知您。

如果您在想，「既然我一開始就可以更加小心，為什麼我需要編寫更多程式碼來使用TypeScript？」你沒有錯，但人類會犯錯，而且我們在長時間工作時經常會犯錯誤。如果同樣的想法應用在施工中，那麼額外的鷹架和安全程序將需要更多的工作和時間，而我們只要在工地小心一點就可以節省時間。

看到了嗎？為了節省時間，這位屋頂工人可能浪費了更多的時間和資源。這只是一名工人。想像一下，隨著更多團隊成員的加入，一個工作團隊正在處理一個專案。這就是軟體開發的現實；從長遠來看，制定一個計劃來發現這些錯誤將對您和您的團隊有所幫助。

TypeScript 範例

以下範例來自 TypeScript 文件[2]，但註解是我的。

打字稿：

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

TypeScript 將在呼叫greet 時擷取錯誤。我們定義greet 來接收兩個參數：person 和date，我們只提供person。 TypeScript 在編譯程式碼時會捕獲此錯誤，並讓您知道它需要第二個參數。在某種程度上，TypeScript 可以被視為程式碼的 linter，以便在您工作時捕獲這些錯誤，但我們可以利用類型語法來進一步幫助我們。

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

現在，我們為 toDateString 方法的兩個參數新增一個類型，person 必須是字串，date 必須是 Date 物件。當在第二個參數 Date() 之前不使用關鍵字 new 來呼叫greet時，TypeScript 會讓您知道它收到了一個字串，而不是日期參數的 Date。現在，您可以在進一步開發之前修復錯誤，並且在測試時收到意外輸出時必須追溯到此錯誤。

現在您已經看到了 TypeScript 的實際應用，讓我們檢查一下設定項目以使用它的後續步驟。

配置 TypeScript 的編譯器：tsconfig.json

預設的 TypeScript 編譯可能不是您想要的，有一種方法可以根據您的需求自訂 TypeScript，類似於使用 linter，但它可以做更多的事情。

第一步是在專案的根目錄中建立一個 tsconfig.json 檔案。文件告訴 TypeScript 編譯過程中應包含哪些檔案。在 tsconfig.json 中，如果您希望使用 JSON 檔案的「includes」鍵來獲得更多特異性，則可以指定應包含在根目錄中的目錄。

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

現在，我們來談談「compilerOptions」。相信我，有很多選擇可供選擇。這是一件好事，但如果這是您第一次使用 TypeScript，也會很可怕。我將分解一些流行的選擇來幫助您入門：

允許

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

此選項允許將 JavaScript 檔案匯入到您的專案中，而不僅僅是 TypeScript。通常，TypeScript 假定所有導入都是 TypeScript，並且會對導入的 JavaScript 檔案給予錯誤，但此選項允許我們使用這些導入，並且在同一儲存庫中使用 TypeScript 和 JavaScript 時會很有幫助。

esModuleInterop

{
  "include": ["src/**/*"]
}

ES6 中的命名空間導入只能是一個對象，但由於這與使用不帶 .default 的 require 相同，因此我們允許 TypeScript 將對象視為函數。當 TypeScript 將程式碼轉換為 JavaScript 時，此選項將解決此問題，而不必小心我們的導入。

目標

{
  "compilerOptions": {
    "allowJs": true
  }
}

當 TypeScript 將程式碼轉換為 JavaScript 時，此選項會變更哪些 JS 功能被降級以及哪些功能保持不變。 es6 是一個不錯的選擇，因為大多數現代瀏覽器都支援 ES6，但您可以為此選項指定任何版本的 ECMAScript 以滿足您的需求。

嚴格的

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

此標誌支援許多不同的類型檢查行為。這將帶來更強大的程式碼庫和更少的錯誤。如果您想排除某些類型檢查行為，請檢查文件 [3] 並將其選項設為 false。如果您只想要一些類型檢查行為，我會考慮打開它們而不是使用 strict。

輸出目錄

{
  "compilerOptions": {
    "target": "es6"
  }
}

當 TypeScript 將程式碼轉換為可用的 JavaScript 時，此選項會將這些檔案傳送到此目錄中。

不發射

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

此選項會停止發出所有已轉譯的 JavaScript 檔案。這可能聽起來很愚蠢，因為我剛剛告訴您有關 outDir 的信息，但 TypeScript 始終會發出文件，而 outDir 會將文件定向到正確的位置。當您已經使用 Babel 或 Webpack 等其他工具來轉譯和捆綁代碼時，noEmit 就會發揮作用。在這種情況下發出意味著創建無用的 JavaScript 檔案。

結論

給你了。這七個選項可協助您設定 TypeScript 配置以及 TypeScript 如何協助您建立更穩定的程式碼庫。我建議閱讀 Matt Pocock 的“TSConfig Cheat Sheet”，以了解更多流行的選項以放入 tsconfig.json 中，並在實現任何這些選項之前始終參考 TSConfig 上的 TypeScript 文件。

編碼快樂！
泰勒·邁耶

資料來源：

[1] https://www.typescriptlang.org/

[2] https://www.typescriptlang.org/docs/handbook/2/basic-types.html

[3] https://www.typescriptlang.org/tsconfig/

[4] https://www.totaltypescript.com/tsconfig-cheat-sheet

以上是TypeScript：TSConfig 選項入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！