TypeScript是Javascript的超集，它提供了類、模組、介面來幫助你構建強大的元件。

VS Code下TypeScript支援在兩種不同的模式下執行：

檔案範圍：在這個模式下，VsCode開啟的TypeScript檔案被視為獨立單元。只要A.ts沒有明確引用b.ts（使用///引用目錄或額外模組），那麼兩個檔案就沒有通用專案上下文。

顯式專案：一個typescript專案通過一個tsconfig.json被定義。該檔案指定ts專案根目錄，列出了屬於專案的檔案還有編譯選項。更多有關tsconfig.json細節。

小提示：我們建議你使用顯式專案模式範圍代替檔案範圍模式。由於顯式專案模式列出了屬於一個專案語言的所有檔案，因此，像查詢所有引用Shift+F12僅考慮專案範圍不是檔案範圍。

tsconfig.json

通常，任何一個新專案的第一步是新增一個tsconfig.json檔案。它定義了ts專案設定例如編譯選項和包括的檔案。

想要做到這點，開啟你想儲存資源的資料夾中新增一個叫tsconfig.json的檔案。然後智慧感知就會生效。

一個tsconfig.json例子，表明是es5、commonJs模組、soumap。

{
  "compilerOptions": {
    "target": "es5","module": "commonjs","sourceMap": true
  }
}

現在，當你建立一個.ts檔案作為專案的一部分我們將會提供豐富的編輯體驗和語法驗證。

將typescript轉換為JavaScript

vscode通過任務執行器與tsc整合。我們能夠使用這個工具來講ts檔案轉換成js檔案。讓我們瀏覽你一個簡單的typescript hello world程式。

步驟1：建立一個簡單的Ts檔案

在空資料夾上開啟vscode然後建立一個helloworld.ts檔案，將一下程式碼替換到檔案中。

class Startup {
  public static main(): number {
    console.log('Hello World');
    return 0;
  }
}

Startup.main();

步驟2：建立task.json

第一步是建立task配置，使用ctrl+shift+p開啟命令調色盤，然後輸入configure task Runner，按回車選擇。

這展示了一個帶有模板的選擇框。

選擇typescript-tsconfig.json。這在工作區.vscode資料夾建立一個tasks.json檔案。

task.json檔案內容看起來像這樣：

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0","command": "tsc","isShellCommand": true,"args": ["-p","."],"showOutput": "silent","problemMatcher": "$tsc"
}

小提示:雖然模板可以幫助生成通用配置設定，但智慧提示也是對task.json檔案有效。使用ctrl+space可以看到可用的設定。

在封面下，我們讓tsc作為一個外部的任務執行器，它僅暴露一個任務：把typescript編譯成javascript檔案。命令是：tsc -p .

小提示：如果你沒有安裝typescript編譯器，你可以點選這。

步驟3：執行構建任務

由於這是檔案中唯一的任務，你可以執行它通過按ctrl+shift+b（執行構建任務）。與此同時你將看到一個額外的helloword.js檔案展示在檔案列表中。

這個typescript檔案沒有任何編譯問題，所以helloworld.js和helloworld.js.map檔案被建立。

如果node.js已經被安裝，你能執行你的helloworld例子通過開啟一個終端然後執行

node HelloWorld.js

小提示：你也能執行這個程式使用vscode的執行/除錯特性，關於在vscode中執行和除錯node應用的細節，在這檢視。

步驟4：回顧構建問題

很不幸，大多數build並不順利，結果通常帶有一些額外的資訊。舉個例子，如果有一個錯誤在typescript檔案中，你可能從tsc中得到下面的輸出：

HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.

這將顯示在輸出視窗中（可以使用ctrl+shift+u開啟），我們為你解析這個輸出然後在工作列中高亮顯示這個問題。

你可以點選那個圖示，得到問題列表並定位他們。

你也可以使用快捷鍵cril+shift+m開啟這個列表。

小提示：任務為許多豐富的行為提供支援。有關如何配置他們的更多資訊，請檢視“任務”話題。

跳轉標記&展示所有標記

ctrl+shift+o：列出所有定義符號關於當前開啟和允許您在其中導航。

ctrl+T：讓你搜索當前專案中或檔案範圍中所有定義的標記。你需要有一個typescript檔案開啟在編輯器中。

格式化程式碼

shift+alt+f:格式化整個文件。ctrl+k ctrl+f：格式化當前選擇的資原始碼。

JSDoc 支援

VsCode 提供了JSDoc對typescript的支援。除了語法上色，我們也會幫助你鍵入JsDoc註釋。鍵入/**他將自動插入結束符*/在jsDoc塊中輸入回車將縮排下一行並自動插入*。

JavaScript Source Map 支援

typescript除錯支援JavaScript source map.在專案執行配置檔案launch.json中將sourceMaps設為true。另外，你可以制定一個typescript檔案使用program屬性。

想要生成你的typescript檔案的source maps，編譯--sourcemap選項或設定tsconfig.json檔案中sourcemap屬性為true。行內資源地圖也是被支援的（一個內容被儲存在url而不是一個單獨的檔案的資源地圖），雖然還沒有支援行內資源。

為生成檔案設定一個不同的outFiles

如果被生成的（已經摺疊）的JavaScript檔案沒有在它原始檔旁邊，你能通過在launch配置中的outfiles屬性幫助vs程式碼偵錯程式定位他們。

無論何時你在原始碼中設定了斷點，vscode 會嘗試通過在oufiles中glob模式指定的檔案查詢生成的資源。

隱藏生成的Javascript檔案

當你使用typescript時，你通常不想看見生成的JavaScript檔案在資源管理器或者搜尋結果中。vscode提供了過濾器功能，files.exclude工作區設定（檔案->引用->設定）你能簡單的建立一個表示式去隱藏這些生成的檔案。

"**/*.js": { "when": "$(basename).ts"}

這個模式將匹配任何JavaScript檔案(**/*.js)，但僅僅是當一個同名的typescript檔案存在。檔案管理器將會不在展示生成的JavaScript資源如果被編輯在相同的位置。

想要排除從.ts和.tsx資原始檔生成的JavaScript檔案，使用下面表示式：

"**/*.js": { "when": "$(basename).ts" },"**/**.js": { "when": "$(basename).tsx" }

這是一個小技巧，搜尋glob模式被使用是關鍵，上面的設定使用兩種不同的glob模式來提供兩個唯一鍵，但搜尋結果相同。

混合的typscript和JavaScript專案

現在可以有一個混淆的ts和js專案了，想要讓JavaScript在ts專案中存在，你能設定allowJs屬性為true在tsconfig.json中。

小提示：tsc編譯器不會自動檢測jsconfig.json檔案的存在。使用-p引數去讓tsc使用你的jsconfig.json檔案。例子，tsc -p jsconfig.json。

使用新版本的typescript

vscode 附帶了最近穩定版本的typescript語言服務，他可能與安裝在當前計算機的和工作區的typescript版本不匹配。當你瀏覽一個ts或js檔案的時候，typescript 當前有效版本展示在狀態列上。

當vscode檢測到tsc版本與活動的ts語言服務版本不同時，一個訊息會展示出來“version mismatch! global tsc(2.1.5)!=vscode's language service(2.2.1).inconsistent compiler errors might occur".這個訊息是友好的，目的是提醒使用者編譯器與活動的語言服務可能的差異。

你可以隱藏這個檢查使用工作區設定typescript.check.tscVersion,如果你點選了詳細廣告條中Dont Check Again ，會設定你的使用者設定fasle。

 "typescript.check.tscVersion": false

另外的選項是在你的工作區中安裝匹配的typescript版本（npm install --save-dev typscript），或者當前電腦全域性安裝（npm install -g typescript）。我們建議本地安裝typescript從而避免與其他ts專案互動問題。

小提示：逍遙得到指定版本的ts，使用@version。舉個ts2.2.1的例子,你將使用npm install --save-dev [email protected].想要預覽下一版本的ts，執行npm install --save-dev typescript@next.

當vscode在後續編譯版本中更新typescript語言服務時，你可能再次看到不匹配的訊息，讓你更新你的typescript版本。

想要預設使用一個不同版本的typescript版本，在你的使用者設定中配置typescript.tsdk，指出一個包含tsserver.js檔案的目錄。你能使用npm list -g typescript命令找到typescript安裝位置。tsserver.js檔案通常在lib資料夾中。

舉個例子

{
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

如果你的工作區有一個特殊的typescrit版本，你能在工作區的ts版本和vscode預設使用的版本切換，方法是在工作區中開啟typescript或js檔案，然後單擊狀態列中的typescript版本號。一個訊息框將會出現，詢問你要使用那個版本的ts程式碼。

切換ts版本或改變typescript.tsdk檔案之後，必須重啟vscode才會生效。你能切換回vscode附帶的ts版本。

Typescript 擴充套件

vscode提供了許多ts開箱即用的特性。除了內建的內容外，你可以安裝擴充套件以實現更強大的功能

原文地址：https://code.visualstudio.com/Docs/languages/typescript

到此這篇關於用VsCode編輯TypeScript的實現方法的文章就介紹到這了,更多相關VsCode編輯TypeScript內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！