什么是 TypeScript？

TypeScript 是 JavaScript 的超集。這意味著您可以在 TypeScript 中使用 JavaScript 語(yǔ)法，因此最好在開(kāi)始使用 TypeScript 之前學(xué)習(xí) JavaScript。有了這個(gè)免責(zé)聲明，我們來(lái)談?wù)?TypeScript 是什么以及如何為 TypeScript 設(shè)置項(xiàng)目。

根據(jù) TypeScript 的文檔，“TypeScript 是一種基于 JavaScript 構(gòu)建的強(qiáng)類(lèi)型編程語(yǔ)言。”[1] TypeScript 語(yǔ)言添加了類(lèi)型語(yǔ)法來(lái)幫助您在開(kāi)發(fā)過(guò)程中及早發(fā)現(xiàn)錯(cuò)誤，并在開(kāi)發(fā)團(tuán)隊(duì)成長(zhǎng)的過(guò)程中保持保障措施隨著項(xiàng)目規(guī)模的擴(kuò)大。 TypeScript 允許您定義變量的數(shù)據(jù)類(lèi)型和對(duì)象的接口。 TypeScript 使用這些定義來(lái)檢查您的代碼在編譯時(shí)是否有錯(cuò)誤，并在您不遵循事先設(shè)置的定義時(shí)通知您。

如果您在想，“既然我一開(kāi)始就可以更加小心，為什么我需要編寫(xiě)更多代碼來(lái)使用 TypeScript？”你沒(méi)有錯(cuò)，但人類(lèi)會(huì)犯錯(cuò)誤，而且我們?cè)陂L(zhǎng)時(shí)間工作時(shí)經(jīng)常會(huì)犯錯(cuò)誤。如果同樣的想法應(yīng)用到施工中，那么額外的腳手架和安全程序?qū)⑿枰嗟墓ぷ骱蜁r(shí)間，而我們只要在工地小心一點(diǎn)就可以節(jié)省時(shí)間。

看到了嗎？為了節(jié)省時(shí)間，這位屋頂工可能浪費(fèi)了更多的時(shí)間和資源。這只是一名工人。想象一下，隨著更多團(tuán)隊(duì)成員的加入，一個(gè)工作團(tuán)隊(duì)正在處理一個(gè)項(xiàng)目。這就是軟件開(kāi)發(fā)的現(xiàn)實(shí)；從長(zhǎng)遠(yuǎn)來(lái)看，制定一個(gè)計(jì)劃來(lái)發(fā)現(xiàn)這些錯(cuò)誤將對(duì)您和您的團(tuán)隊(duì)有所幫助。

TypeScript 示例

以下示例來(lái)自 TypeScript 文檔[2]，但注釋是我的。

打字稿：

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

greet("Brendan");

TypeScript 將在調(diào)用greet 時(shí)捕獲錯(cuò)誤。我們定義greet 來(lái)接收兩個(gè)參數(shù)：person 和date，并且我們只提供person。 TypeScript 在編譯代碼時(shí)會(huì)捕獲此錯(cuò)誤，并讓您知道它需要第二個(gè)參數(shù)。在某種程度上，TypeScript 可以被視為代碼的 linter，以便在您工作時(shí)捕獲這些錯(cuò)誤，但我們可以利用類(lèi)型語(yǔ)法來(lái)進(jìn)一步幫助我們。

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

greet("Maddison", Date());

現(xiàn)在，我們?yōu)?toDateString 方法的兩個(gè)參數(shù)添加一個(gè)類(lèi)型，person 必須是字符串，date 必須是 Date 對(duì)象。當(dāng)在第二個(gè)參數(shù) Date() 之前不使用關(guān)鍵字 new 來(lái)調(diào)用greet時(shí)，TypeScript 會(huì)讓您知道它收到了一個(gè)字符串，而不是日期參數(shù)的 Date?，F(xiàn)在，您可以在進(jìn)一步開(kāi)發(fā)之前修復(fù)錯(cuò)誤，并且在測(cè)試時(shí)收到意外輸出時(shí)必須追溯到此錯(cuò)誤。

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

配置 TypeScript 的編譯器：tsconfig.json

默認(rèn)的 TypeScript 編譯可能不是您想要的，有一種方法可以根據(jù)您的需求自定義 TypeScript，類(lèi)似于使用 linter，但它可以做更多的事情。

第一步是在項(xiàng)目的根目錄中創(chuàng)建一個(gè) tsconfig.json 文件。該文件告訴 TypeScript 編譯過(guò)程中應(yīng)包含哪些文件。在 tsconfig.json 中，如果您希望使用 JSON 文件的“includes”鍵獲得更多特異性，則可以指定應(yīng)包含在根目錄中的目錄。

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

greet("Brendan");

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

允許

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

greet("Maddison", Date());

此選項(xiàng)允許將 JavaScript 文件導(dǎo)入到您的項(xiàng)目中，而不僅僅是 TypeScript。通常，TypeScript 假定所有導(dǎo)入都是 TypeScript，并且會(huì)對(duì)導(dǎo)入的 JavaScript 文件給出錯(cuò)誤，但此選項(xiàng)允許我們使用這些導(dǎo)入，并且在同一存儲(chǔ)庫(kù)中使用 TypeScript 和 JavaScript 時(shí)會(huì)很有幫助。

esModuleInterop

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

ES6 中的命名空間導(dǎo)入只能是一個(gè)對(duì)象，但由于這與使用不帶 .default 的 require 相同，因此我們?cè)试S TypeScript 將對(duì)象視為函數(shù)。當(dāng) TypeScript 將代碼轉(zhuǎn)換為 JavaScript 時(shí)，此選項(xiàng)將解決此問(wèn)題，而不必小心我們的導(dǎo)入。

目標(biāo)

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

當(dāng) TypeScript 將代碼轉(zhuǎn)換為 JavaScript 時(shí)，此選項(xiàng)會(huì)更改哪些 JS 功能被降級(jí)以及哪些功能保持不變。 es6 是一個(gè)不錯(cuò)的選擇，因?yàn)榇蠖鄶?shù)現(xiàn)代瀏覽器都支持 ES6，但您可以為此選項(xiàng)指定任何版本的 ECMAScript 以滿(mǎn)足您的需求。

嚴(yán)格的

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

此標(biāo)志支持許多不同的類(lèi)型檢查行為。這將帶來(lái)更強(qiáng)大的代碼庫(kù)和更少的錯(cuò)誤。如果您想排除某些類(lèi)型檢查行為，請(qǐng)檢查文檔 [3] 并將其選項(xiàng)設(shè)置為 false。如果您只想要一些類(lèi)型檢查行為，我會(huì)考慮打開(kāi)它們而不是使用 strict。

輸出目錄

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

當(dāng) TypeScript 將代碼轉(zhuǎn)換為可用的 JavaScript 時(shí)，此選項(xiàng)會(huì)將這些文件發(fā)送到此目錄中。

不發(fā)射

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

greet("Brendan");

此選項(xiàng)會(huì)停止發(fā)出所有已轉(zhuǎn)譯的 JavaScript 文件。這可能聽(tīng)起來(lái)很愚蠢，因?yàn)槲覄倓偢嬖V過(guò)您有關(guān) outDir 的信息，但 TypeScript 始終會(huì)發(fā)出文件，而 outDir 會(huì)將文件定向到正確的位置。當(dāng)您已經(jīng)使用 Babel 或 Webpack 等其他工具來(lái)轉(zhuǎn)譯和捆綁代碼時(shí)，noEmit 就會(huì)發(fā)揮作用。在這種情況下發(fā)出意味著創(chuàng)建無(wú)用的 JavaScript 文件。

結(jié)論

給你了。這七個(gè)選項(xiàng)可幫助您設(shè)置 TypeScript 配置以及 TypeScript 如何幫助您創(chuàng)建更穩(wěn)定的代碼庫(kù)。我建議閱讀 Matt Pocock 的“TSConfig Cheat Sheet”，了解更多流行的選項(xiàng)以放入 tsconfig.json 中，并在實(shí)現(xiàn)任何這些選項(xiàng)之前始終參考 TSConfig 上的 TypeScript 文檔。

編碼快樂(lè)！
泰勒·邁耶

資料來(lái)源：

[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 選項(xiàng)入門(mén)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！