原文地址：Get Started Developing TypeScript Apps with WebStorm

TypeScript 概述

TypeScript是JavaScript的超集，它包含的特性使其比標(biāo)準的JavaScript更易于編寫和維護。類型是TypeScript的核心，它在編譯到JavaScript時執(zhí)行類型檢查。

雖然JavaScript確實包含一些基本類型，但它的類型系統(tǒng)是松散類型的，并且類型是根據(jù)它們的用法推斷的。開發(fā)人員可以在程序執(zhí)行期間隨意更改變量的數(shù)據(jù)類型。這聽起來可能很簡單，但它確實是一種容易惹上麻煩的方法！尤其是當(dāng)從與預(yù)期類型不匹配的輸入源接受某些數(shù)據(jù)時。TypeScript提供了完整的類型系統(tǒng)，因為類型對于創(chuàng)建正確的代碼來說很重要。

除了數(shù)據(jù)類型之外，TypeScript和JavaScript一樣也是面向?qū)ο蟮?，因此您可以?chuàng)建模型來鏡像真實世界中的數(shù)據(jù)存儲或?qū)ο?。它還執(zhí)行模塊解析并具有命名空間的概念，因此您可以更輕松地組織代碼。最后，TypeScript在ECMAScript標(biāo)準化之前就有許多新的語法功能。由于這些新的編程功能，TypeScript使得編寫JavaScript應(yīng)用程序變得非常容易！

安裝和配置TypeScript

您無需執(zhí)行任何操作即可將TypeScript與WebStorm一起使用。您可以在任何WebStorm項目中使用它，包括使用JavaScript框架或現(xiàn)有項目的內(nèi)置項目模板。

當(dāng)您準備開始編寫TypeScript代碼時，請將tsconfig.json文件（TypeScript配置文件）添加到項目中。 tsconfig.json文件是一個JSON文件，它告訴TypeScript編譯器如何將TypeScript編譯為JavaScript。在WebStorm中，通過從菜單中選擇File - New tsconfig.json File來添加tsconfig.json文件。大多數(shù)開發(fā)人員將此文件添加到其根目錄。

wsfilenewtsconfig.png

默認的tsconfig.json文件如下所示：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

項目目錄和資產(chǎn)可以組織成任何結(jié)構(gòu)，但是，一種流行的約定是創(chuàng)建一個結(jié)構(gòu)，其中TypeScript文件位于src目錄中，而編譯后的輸出位于另一個結(jié)構(gòu)中，例如構(gòu)建文件夾，類似于以下內(nèi)容：

tsfilestructure.png

要配置此文件夾結(jié)構(gòu)，必須首先在tsconfig.json文件的“compilerOptions”下添加“outDir”：“build”。您可以通過添加“include”指令作為頂級條目來提醒TypeScript在構(gòu)建中構(gòu)建特定文件夾。以下代碼段顯示了如何包含src / scripts文件夾以進行編譯。

"include": [
    "src/scripts/**/*"
]

如果您愿意，可以使用JavaScript壓縮包，例如webpack，將輸出合并為一個JavaScript文件。

編寫TypeScript代碼

由于許多TypeScript應(yīng)用程序是客戶端應(yīng)用程序的一部分，我們將在HTML文件的主體中添加一些簡單的HTML，該文件定義了一個按鈕和一個顯示輸出的元素。

<button id="totalButton">See Total</button>
<div id="totalMessage"></div> 

要輸出消息，必須將一些代碼添加到.ts文件中。以下代碼顯示了如何使用TypeScript顯示消息：

function displayTotalPerCustomer(person: string, total: number) {
  let message: string = "Total for " + person + " is " + total;
  document.getElementById("totalMessage").innerText = message;
}

上述TypeScript代碼和JavaScript之間只有微小的差別，但在相當(dāng)大的應(yīng)用程序中，您會看到更多。注意person和total函數(shù)參數(shù)的類型注釋，以及消息變量。 TypeScript提供了一個完整的類型系統(tǒng)，因此您可以編寫易于閱讀和維護的代碼。您可以在.ts文件中使用TypeScript和JavaScript編寫。

請注意WebStorm如何檢測并警告您類型不匹配。您可以使用意圖或快速修復(fù)（Alt-Enter）來解決問題。

tstypemismatch.png

準備好后，使用TypeScript工具窗口編譯為JavaScript。請注意，WebStorm同時構(gòu)建了JavaScript文件和.map文件。映射文件將TypeScript代碼映射到其JavaScript輸出，并且存在可以允許開發(fā)人員調(diào)試TypeScript代碼的工具。在編譯生產(chǎn)時，通常不會構(gòu)建映射，除非生產(chǎn)調(diào)試需要它們。要關(guān)閉映射，請在tsconfig文件中將“compilerOptions”下的“sourceMap”設(shè)置更改為false。

ts-compile-to-js.gif

測試TypeScript應(yīng)用程序

編譯完代碼后，在瀏覽器中運行應(yīng)用程序進行測試。在WebStorm中，導(dǎo)航到要啟動的頁面，然后單擊編輯器右上角所選的瀏覽器圖標(biāo)。您還可以使用WebStorm優(yōu)秀的調(diào)試工具調(diào)試TypeScript應(yīng)用程序。

ws-run-ts-app.png

注意瀏覽器中的localhost：port地址，指定這是WebStorm的Web服務(wù)器進行測試。

ws-test-ts-browser-add-bar.png

總結(jié)

WebStorm具有許多用于在TypeScript中開發(fā)應(yīng)用程序的功能。它使入門變得簡單，無需添加任何插件或擴展。

請留意更多帖子，了解如何使用帶有WebStorm的TypeScript開發(fā)應(yīng)用程序?；蛘咴L問WebStorm文檔以了解有關(guān)TypeScript支持的更多信息。