安裝Visual Studio Code

下載地址：

https://code.visualstudio.com/

下載後安裝：

下載地址：

https://nodejs.org/en/download/

Visual Studio Code包含TypeScript語言支援，但不包括TypeScript編譯器tsc。您需要在全域性或工作區中安裝TypeScript編譯器，以將TypeScript原始碼轉換為JavaScript（tsc HelloWorld.ts）。

安裝TypeScript的最簡單方法是透過npm，即Node.js包管理器。如果安裝了npm，則可以-g透過以下方式在計算機上安裝TypeScript global（）：

npm install -g typescript

您可以透過檢查版本來測試安裝。

tsc --version

除錯

VS Code內建支援TypeScript除錯。為了支援除錯TypeScript以及執行的JavaScript程式碼，VS Code依賴於偵錯程式的源對映來在原始TypeScript原始碼和正在執行的JavaScript之間進行對映。您可以構建透過設定過程中建立源對映"sourceMap": true在你的tsconfig.json。

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"outDir": "out",

"sourceMap": true

}

}

這裡以VS Code為例，簡單介紹一下如何在VS Code中配置TypeScript開發環境，主要內容如下：

1.首先，安裝node環境，這個直接到node官網上下載就行，如下，選擇適合自己平臺的版本即可：

2.接著需要使用npm工具全域性安裝TypeScript編譯器，這個直接開啟cmd視窗，輸入安裝命令“npm install -g typescript”就行，如下，很快就能安裝成功，安裝完成後，也可以使用“tsc -v”命令測試一下：

3.然後我們新建一個ts目錄，在VS Code中開啟這個目錄，建立一個TypeScript測試檔案hello.ts，程式碼如下，非常簡單：

4.接著需要在ts目錄下建立一個tsconfig.json檔案，它定義了TpyeScript專案的設定，包括編譯的選項和檔案等，主要內容如下：

然後還需要在ts自帶的.vscode目錄下建立一個tasks.json檔案，編寫如下內容，這裡主要是告訴tsc編譯器以tsconfig.json內容來編譯Typescript檔案：

5.接著在VS Code中按下ctrl+shift+b執行編譯，就會在ts目錄下看到編譯出來的hello.js檔案和hello.js.map檔案，如下：

6.最後就可以直接除錯執行這個hello.js檔案了，效果如下，非常方便：

至此，我們就完成了在VS Code中搭建TypeScript開發環境。總的來說，整個過程不難，就是步驟有些繁瑣，只要你熟悉一下上面的流程，很快就能在本地VS Code搭建好TypeScript開發環境，網上也有相關教程和資料，非常豐富、詳細，感興趣的話，可以搜一下，希望以上分享的內容能對你有所幫助吧，也歡迎大家評論、留言。