這篇文章主要為大家展示了如何用VsCode編輯TypeScript，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來看看吧。

10多年的三臺網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整三臺建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“三臺網(wǎng)站設(shè)計(jì)”,“三臺網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

TypeScript是Javascript的超集，它提供了類、模塊、接口來幫助你構(gòu)建強(qiáng)大的組件。

VS Code下TypeScript支持在兩種不同的模式下運(yùn)行：

文件范圍：在這個(gè)模式下，VsCode打開的TypeScript文件被視為獨(dú)立單元。只要A.ts沒有明確引用b.ts（使用///引用目錄或額外模塊），那么兩個(gè)文件就沒有通用項(xiàng)目上下文。

顯式項(xiàng)目：一個(gè)typescript項(xiàng)目通過一個(gè)tsconfig.json被定義。該文件指定ts項(xiàng)目根目錄，列出了屬于項(xiàng)目的文件還有編譯選項(xiàng)。更多有關(guān)tsconfig.json細(xì)節(jié)。

小提示：我們建議你使用顯式項(xiàng)目模式范圍代替文件范圍模式。由于顯式項(xiàng)目模式列出了屬于一個(gè)項(xiàng)目語言的所有文件，因此，像查找所有引用Shift+F12僅考慮項(xiàng)目范圍不是文件范圍。

tsconfig.json

通常，任何一個(gè)新項(xiàng)目的第一步是添加一個(gè)tsconfig.json文件。它定義了ts項(xiàng)目設(shè)置例如編譯選項(xiàng)和包括的文件。

想要做到這點(diǎn)，打開你想存儲資源的文件夾中添加一個(gè)叫tsconfig.json的文件。然后智能感知就會(huì)生效。

一個(gè)tsconfig.json例子，表明是es5、commonJs模塊、soumap。

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

現(xiàn)在，當(dāng)你創(chuàng)建一個(gè).ts文件作為項(xiàng)目的一部分我們將會(huì)提供豐富的編輯體驗(yàn)和語法驗(yàn)證。

將typescript轉(zhuǎn)換為JavaScript

vscode通過任務(wù)運(yùn)行器與tsc集成。我們能夠使用這個(gè)工具來講ts文件轉(zhuǎn)換成js文件。讓我們?yōu)g覽你一個(gè)簡單的typescript hello world程序。

步驟1：創(chuàng)建一個(gè)簡單的Ts文件

在空文件夾上打開vscode然后創(chuàng)建一個(gè)helloworld.ts文件，將一下代碼替換到文件中。

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

Startup.main();

步驟2：創(chuàng)建task.json

第一步是建立task配置，使用ctrl+shift+p打開命令調(diào)色板，然后輸入configure task Runner，按回車選擇。

這展示了一個(gè)帶有模板的選擇框。

選擇typescript-tsconfig.json。這在工作區(qū).vscode文件夾創(chuàng)建一個(gè)tasks.json文件。

task.json文件內(nèi)容看起來像這樣：

{
  // 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"
}

小提示:雖然模板可以幫助生成通用配置設(shè)置，但智能提示也是對task.json文件有效。使用ctrl+space可以看到可用的設(shè)置。

在封面下，我們讓tsc作為一個(gè)外部的任務(wù)運(yùn)行器，它僅暴露一個(gè)任務(wù)：把typescript編譯成javascript文件。命令是：tsc -p .

小提示：如果你沒有安裝typescript編譯器，你可以點(diǎn)擊這。

步驟3：運(yùn)行構(gòu)建任務(wù)

由于這是文件中唯一的任務(wù)，你可以執(zhí)行它通過按ctrl+shift+b（運(yùn)行構(gòu)建任務(wù)）。與此同時(shí)你將看到一個(gè)額外的helloword.js文件展示在文件列表中。

這個(gè)typescript文件沒有任何編譯問題，所以helloworld.js和helloworld.js.map文件被創(chuàng)建。

如果node.js已經(jīng)被安裝，你能運(yùn)行你的helloworld例子通過打開一個(gè)終端然后運(yùn)行

node HelloWorld.js

小提示：你也能運(yùn)行這個(gè)程序使用vscode的運(yùn)行/調(diào)試特性，關(guān)于在vscode中運(yùn)行和調(diào)試node應(yīng)用的細(xì)節(jié)，在這查看。

步驟4：回顧構(gòu)建問題

很不幸，大多數(shù)build并不順利，結(jié)果通常帶有一些額外的信息。舉個(gè)例子，如果有一個(gè)錯(cuò)誤在typescript文件中，你可能從tsc中得到下面的輸出：

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

這將顯示在輸出窗口中（可以使用ctrl+shift+u打開），我們?yōu)槟憬馕鲞@個(gè)輸出然后在任務(wù)欄中高亮顯示這個(gè)問題。

你可以點(diǎn)擊那個(gè)圖標(biāo)，得到問題列表并定位他們。

你也可以使用快捷鍵cril+shift+m打開這個(gè)列表。

小提示：任務(wù)為許多豐富的行為提供支持。有關(guān)如何配置他們的更多信息，請查看“任務(wù)”話題。

跳轉(zhuǎn)標(biāo)記&展示所有標(biāo)記

ctrl+shift+o：列出所有定義符號關(guān)于當(dāng)前打開和允許您在其中導(dǎo)航。

ctrl+T：讓你搜索當(dāng)前項(xiàng)目中或文件范圍中所有定義的標(biāo)記。你需要有一個(gè)typescript文件打開在編輯器中。

格式化代碼

shift+alt+f:格式化整個(gè)文檔。ctrl+k ctrl+f：格式化當(dāng)前選擇的資源代碼。

JSDoc 支持

VsCode 提供了JSDoc對typescript的支持。除了語法上色，我們也會(huì)幫助你鍵入JsDoc注釋。鍵入/**他將自動(dòng)插入結(jié)束符*/在jsDoc塊中輸入回車將縮進(jìn)下一行并自動(dòng)插入*。

JavaScript Source Map 支持

typescript調(diào)試支持JavaScript source map.在項(xiàng)目運(yùn)行配置文件launch.json中將sourceMaps設(shè)為true。另外，你可以制定一個(gè)typescript文件使用program屬性。

想要生成你的typescript文件的source maps，編譯--sourcemap選項(xiàng)或設(shè)置tsconfig.json文件中sourcemap屬性為true。行內(nèi)資源地圖也是被支持的（一個(gè)內(nèi)容被存儲在url而不是一個(gè)單獨(dú)的文件的資源地圖），雖然還沒有支持行內(nèi)資源。

為生成文件設(shè)置一個(gè)不同的outFiles

如果被生成的（已經(jīng)折疊）的JavaScript文件沒有在它源文件旁邊，你能通過在launch配置中的outfiles屬性幫助vs代碼調(diào)試器定位他們。

無論何時(shí)你在源代碼中設(shè)置了斷點(diǎn)，vscode 會(huì)嘗試通過在oufiles中g(shù)lob模式指定的文件查找生成的資源。

隱藏生成的Javascript文件

當(dāng)你使用typescript時(shí)，你通常不想看見生成的JavaScript文件在資源管理器或者搜索結(jié)果中。vscode提供了過濾器功能，files.exclude工作區(qū)設(shè)置（文件->引用->設(shè)置）你能簡單的創(chuàng)建一個(gè)表達(dá)式去隱藏這些生成的文件。

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

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

想要排除從.ts和.tsx資源文件生成的JavaScript文件，使用下面表達(dá)式：

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

這是一個(gè)小技巧，搜索glob模式被使用是關(guān)鍵，上面的設(shè)置使用兩種不同的glob模式來提供兩個(gè)唯一鍵，但搜索結(jié)果相同。

混合的typscript和JavaScript項(xiàng)目

現(xiàn)在可以有一個(gè)混淆的ts和js項(xiàng)目了，想要讓JavaScript在ts項(xiàng)目中存在，你能設(shè)置allowJs屬性為true在tsconfig.json中。

小提示：tsc編譯器不會(huì)自動(dòng)檢測jsconfig.json文件的存在。使用-p參數(shù)去讓tsc使用你的jsconfig.json文件。例子，tsc -p jsconfig.json。

使用新版本的typescript

vscode 附帶了最近穩(wěn)定版本的typescript語言服務(wù)，他可能與安裝在當(dāng)前計(jì)算機(jī)的和工作區(qū)的typescript版本不匹配。當(dāng)你瀏覽一個(gè)ts或js文件的時(shí)候，typescript 當(dāng)前有效版本展示在狀態(tài)欄上。

當(dāng)vscode檢測到tsc版本與活動(dòng)的ts語言服務(wù)版本不同時(shí)，一個(gè)消息會(huì)展示出來“version mismatch! global tsc(2.1.5)!=vscode's language service(2.2.1).inconsistent compiler errors might occur".這個(gè)消息是友好的，目的是提醒用戶編譯器與活動(dòng)的語言服務(wù)可能的差異。

你可以隱藏這個(gè)檢查使用工作區(qū)設(shè)置typescript.check.tscVersion,如果你點(diǎn)擊了詳細(xì)廣告條中Dont Check Again ，會(huì)設(shè)置你的用戶設(shè)置fasle。

 "typescript.check.tscVersion": false

另外的選項(xiàng)是在你的工作區(qū)中安裝匹配的typescript版本（npm install --save-dev typscript），或者當(dāng)前電腦全局安裝（npm install -g typescript）。我們建議本地安裝typescript從而避免與其他ts項(xiàng)目交互問題。

小提示：逍遙得到指定版本的ts，使用@version。舉個(gè)ts2.2.1的例子,你將使用npm install --save-dev typescript@2.2.1.想要預(yù)覽下一版本的ts，運(yùn)行npm install --save-dev typescript@next.

當(dāng)vscode在后續(xù)編譯版本中更新typescript語言服務(wù)時(shí)，你可能再次看到不匹配的消息，讓你更新你的typescript版本。

想要默認(rèn)使用一個(gè)不同版本的typescript版本，在你的用戶設(shè)置中配置typescript.tsdk，指出一個(gè)包含tsserver.js文件的目錄。你能使用npm list -g typescript命令找到typescript安裝位置。tsserver.js文件通常在lib文件夾中。

舉個(gè)例子

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

如果你的工作區(qū)有一個(gè)特殊的typescrit版本，你能在工作區(qū)的ts版本和vscode默認(rèn)使用的版本切換，方法是在工作區(qū)中打開typescript或js文件，然后單擊狀態(tài)欄中的typescript版本號。一個(gè)消息框?qū)?huì)出現(xiàn)，詢問你要使用那個(gè)版本的ts代碼。

切換ts版本或改變typescript.tsdk文件之后，必須重啟vscode才會(huì)生效。你能切換回vscode附帶的ts版本。

Typescript 擴(kuò)展

vscode提供了許多ts開箱即用的特性。除了內(nèi)置的內(nèi)容外，你可以安裝擴(kuò)展以實(shí)現(xiàn)更強(qiáng)大的功能

以上就是關(guān)于如何用VsCode編輯TypeScript的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。