什麼是 TypeScript？

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

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

如果您在想，「既然我一開始就可以更加小心，為什麼我需要編寫更多程式碼來使用TypeScript？」你沒有錯，但人類會犯錯，而且我們在長時間工作時經(jīng)常會犯錯誤。如果同樣的想法應(yīng)用在施工中，那麼額外的鷹架和安全程序?qū)⑿枰嗟墓ぷ骱蜁r間，而我們只要在工地小心一點就可以節(jié)省時間。

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

TypeScript 範(fàn)例

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

打字稿：

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

greet("Brendan");

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

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

greet("Maddison", Date());

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

現(xiàn)在您已經(jīng)看到了 TypeScript 的實際應(yīng)用，讓我們檢查一下設(shè)定項目以使用它的後續(xù)步驟。

配置 TypeScript 的編譯器：tsconfig.json

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

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

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

greet("Brendan");

現(xiàn)在，我們來談?wù)劇竎ompilerOptions」。相信我，有很多選擇可供選擇。這是一件好事，但如果這是您第一次使用 TypeScript，也會很可怕。我將分解一些流行的選擇來幫助您入門：

允許

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

greet("Maddison", Date());

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

esModuleInterop

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

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

目標(biāo)

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

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

嚴(yán)格的

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

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

輸出目錄

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

當(dāng) TypeScript 將程式碼轉(zhuǎn)換為可用的 JavaScript 時，此選項會將這些檔案傳送到此目錄中。

不發(fā)射

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

greet("Brendan");

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

結(jié)論

給你了。這七個選項可協(xié)助您設(shè)定 TypeScript 配置以及 TypeScript 如何協(xié)助您建立更穩(wěn)定的程式碼庫。我建議閱讀 Matt Pocock 的“TSConfig Cheat Sheet”，以了解更多流行的選項以放入 tsconfig.json 中，並在實現(xiàn)任何這些選項之前始終參考 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 選項入門的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！