用VsCode編輯TypeScript

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例子，代表是es五、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 typescript@2.2.1.想要預覽下一版本的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開箱即用的特性。除了內置的內容外，你能夠安裝擴展以實現更強大的功能