vscode typescript 環(huán)境搭建

https://medium.com/@equisept/simplest-typescript-with-visual-studio-code-e42843fe437
https://zhuanlan.zhihu.com/p/21611724

Ctrl+Shift+B

打造TypeScript的Visual Studio Code開發(fā)環(huán)境

2gua

?編程 ?讀書 ?翻譯 ?太極拳

已關(guān)注

一絲等 150 人贊了該文章

</header>

TypeScript是由微軟大神Anders Hejlsberg（安德斯·海爾斯伯格，丹麥人福青，Turbo Pascal編譯器的主要作者开缎，Delphi电谣、C#開發(fā)領(lǐng)導(dǎo)者王带，同時也是.NET奠基人之一）領(lǐng)銜開發(fā)的频蛔。

TypeScript可謂一門語言空盼，其主要特性有：

兼容 ECMAScript 2015（ES6）規(guī)范衰抑，可選擇編譯成ES6或ES5規(guī)范的JavaScript代碼（ECMAScript 3及以上版本）；
面向?qū)ο笙惆椋碛幸恍┖瘮?shù)式特性慰枕；
類型語言；
實現(xiàn)了注解即纲、泛型等特性具帮；
適配大型App構(gòu)建。

這些特性非常吸引我低斋，特別是 Anders Hejlsberg是我的四位“偶像”之一（其他三位分別是 Linus Torvalds蜂厅、 Eric Raymond、 Dave Thomas——知名Ruby/Rails程序員膊畴、作家掘猿，現(xiàn)在喜歡上了Elixir），這更是提高了TypeScript在我心中的顏值巴比。不少人對此類最終編譯成JavaScript的語言不感冒术奖，恰好ES6正式發(fā)布后增加了許多特性礁遵，讓他們更是覺得此類語言是雞肋轻绞。但只憑 TypeScript的品質(zhì)及某些獨有特性如泛型、注解佣耐，就有其存在的極大價值政勃，況且著名框架Angular 2就是使用TypeScript開發(fā)的！

工欲善其事兼砖，必先利其器奸远，除了一門語言是內(nèi)力，還需有稱心的利刃為兵器讽挟。好馬配好鞍——我覺得TypeScript的最佳開發(fā)工具是Visual Studio Code——同屬微軟出品的優(yōu)秀編輯器懒叛，作為一家公司的兩個利器，其搭配使用時渾然天成耽梅。最重要的是薛窥，微軟當(dāng)下?lián)肀ч_源的力度是越來越大，TypeScript與VS Code都是開源的。同時诅迷，VS Code的代碼提示佩番、片段及調(diào)試功能也非常棒！

本文將詳細闡述TypeScript與VS Code相結(jié)合的開發(fā)環(huán)境打造之道罢杉，為后續(xù)的學(xué)習(xí)提供先決條件趟畏。

先總結(jié)一下TypeScript開發(fā)環(huán)境用到的各種工具：

Node——通過npm安裝TypeScript及大量依賴包。從https://nodejs.org/下載并安裝它滩租；如果安裝各種包不方便赋秀，可以將安裝源改為國內(nèi)鏡像，具體方案網(wǎng)絡(luò)上已經(jīng)有很多了持际，可供參考沃琅；
VS Code——從 https://code.visualstudio.com/ 下載并安裝它；
TypeScript——TypeScript語言蜘欲，后面通過npm安裝益眉；
concurrently——Node包，同時執(zhí)行命令用姥份。后面通過npm安裝郭脂；
lite-server——Node包，輕量級的Node開發(fā)服務(wù)器澈歉。后面通過npm安裝展鸡；

先按上述列表安裝Node與VS Code，接下來我們開始安裝其余工具埃难。

1 .2 安裝及開發(fā)環(huán)境配置

1.2.1 安裝TypeScript

建議先將TypeScript安裝成全局包方式莹弊，打開終端或命令行窗口，執(zhí)行以下命令安裝TypeScript：

npm install -g typescript

本文寫作時TypeScript的版本為1.8.10涡尘。

1.2.2 安裝其他Node包

新建一個目錄忍弛，如：hello-typescript，用剛安裝好的VS Code編輯名為package.json的文件考抄，保存于hello-typescript目錄中细疚。

package.json是包描述文件。其中列出了應(yīng)用所需的各種依賴包川梅、待執(zhí)行腳本疯兼，以及其他一些設(shè)置內(nèi)容。編輯其內(nèi)容為：

{
  "name": "hello-typescript",
  "version": "0.0.1",
  "description": "Learning TypeScript.",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "author": "2gua",
  "license": "ISC",
  "dependencies": {

  },
  "devDependencies": {
    "lite-server": "^2.2.0",
    "concurrently": "^2.0.0"
  }
}

package.json文件主要說明：

"name"——包的名稱
"version"——版本
"description"——App描述贫途，方便搜索
"scripts"——可執(zhí)行的腳本
"start": "tsc && concurrently "npm run tsc:w" "npm run lite""——同時執(zhí)行的命令
"lite": "lite-server"——啟動lite-server服務(wù)器
"tsc": "tsc"——執(zhí)行一次TypeScript編譯
"tsc:w": "tsc -w"——以監(jiān)控模式運行TypeScript編譯器吧彪。后臺始終保持進程。一旦TypeScript文件變化即會重編譯
"dependencies"——生產(chǎn)環(huán)境中需要的依賴包
"devDependencies"——開發(fā)中要使用的安裝包

關(guān)于package.json的配置可以參考：這里丢早。

1.2.3 配置VS Code的TypeScript開發(fā)環(huán)境

VS Code提供了很好的TypeScript開發(fā)特性支持姨裸。

首先，打開剛才創(chuàng)建的目錄hello-typescript：

image

可以看到當(dāng)前VS Code的資源管理器顯示如下：

image

編輯示例代碼

先來編輯我們的第一個TypeScript程序hello-typescript.ts，放在根目錄（指hello-typescript啦扬，下同）下中狂。

image

看看，VS Code對TypeScript的支持是非常到位的扑毡。

hello-typescript.ts代碼文件的內(nèi)容如下：

/**
 * BirdWhisperer
 * by 2gua
 */
class BirdWhisperer {
    chirping: string;
    constructor(message: string) {
        this.chirping = message;
    }
    chirp() {
        return 'Ah~ oh~ ' + this.chirping;
    }
}
let birdWhisperer = new BirdWhisperer('coo-coo-coo...');
document.body.innerHTML = birdWhisperer.chirp();

創(chuàng)建TypeScript編譯器配置文件

當(dāng)前TypeScript代碼并不能直接執(zhí)行胃榕，需編譯為JavaScript代碼。而借助VS Code瞄摊，我們就不用在命令行輸入編譯命令了勋又。為此，在根目錄添加一個tsconfig.json文件换帜。該文件是TypeScript編譯器配置文件楔壤。文件內(nèi)容如下所示：

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

tsconfig.json文件各項說明如下：

"compilerOptions"——編譯器選項；
"target"——編譯目標(biāo)惯驼，如這里編譯為es5代碼蹲嚣；
"module"——處理獨立文件時的模塊加載方式；
"sourceMap"——是否創(chuàng)建map文件以幫助調(diào)試祟牲；
"exclude"——編譯器會編譯TypeScript文件（.ts或.tsx）隙畜，通過排除設(shè)置里的TypeScript文件不會被編譯。

關(guān)于tsconfig.json的進一步信息可以參考：這里说贝。

創(chuàng)建測試頁面

最后议惰，我們還需要創(chuàng)建一個測試頁面index.html來測試我們的程序。

在新創(chuàng)建的index.html鍵入：html:5乡恕，按Tab鍵言询，就會生成好HTML模版文件！然后在body中鍵入：script:src傲宜，按Tab鍵运杭，然后加載我們馬上要編譯好的的hello-typescript.ts對應(yīng)的JavaScript文件hello-typescript.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bird Whisperer</title>
</head>
<body>
    <script src="hello-typescript.js"></script>
</body>
</html>

VS Code無疑非常貼心！

編譯項目

先看看至目前我們的項目情況：

image

在命令行窗口進入項目根目錄蛋哭，執(zhí)行npm start县习，將看到會自動打開瀏覽器窗口：

image

如果調(diào)整TypeScript程序涮母，工具我們前面的配置谆趾，服務(wù)器會自動識別我們的變動并刷新瀏覽器，不需要我們手動刷新瀏覽器：

image

再來看看現(xiàn)在的項目情況：

image

項目里多了兩個文件叛本，一個是TypeScript編譯后對應(yīng)的JavaScript文件沪蓬，也就是我們前面包含進測試頁面inde.html里的。另一個.map文件后面馬上會用到来候。

開發(fā)環(huán)境幾乎配置妥妥了跷叉，剩下還需要看看調(diào)試TypeScript程序。

1.2.4 VS Code調(diào)試

點擊Debug按鈕（或者Ctrl+Shift+d），就會出現(xiàn)以下界面：

image

點擊綠色小三角（或F5）就開始調(diào)試云挟。首次會彈出調(diào)試配置梆砸，請選擇“Node.js”：

image

此時會創(chuàng)建.vscode/launch.json文件，首先要配置一下該文件园欣。將"program"設(shè)置為hello-typescript.js帖世，"sourceMaps"設(shè)置為true：

image

現(xiàn)在先試著在文件中設(shè)置一個斷點（在圖示位置點擊一下即可，再次點擊就關(guān)閉斷點沸枯，如是切換）：

image

然后再次點擊綠色小三角進行調(diào)試，之后試著選擇“單步跳過”命令绑榴，看看左邊的“變量”窗口發(fā)生的變化：

image

有時候我都懷疑VS Code不是編譯器哪轿，而是一個IDE了！

注意.map文件是調(diào)試用的文件翔怎。同時窃诉，要進行.ts文件的調(diào)試，在.vscode/launch.json文件中赤套，請將"sourceMaps"設(shè)置為true褐奴。

1.2.5 瀏覽器調(diào)試

Chrome下的調(diào)試

打開Chrome，Ctrl+Shift+i打開開發(fā)者工具于毙，選擇Sources頁面敦冬，打開hello-typescript.ts,設(shè)置斷點，再次刷新頁面唯沮，之后點擊“單步跳過”命令脖旱，看看效果：

image

Firefox下的調(diào)試

雖然大家都喜歡Chrome，但作為Firefox老用戶介蛉，一直不舍Firefox萌庆，F(xiàn)irefox也是我主要瀏覽器。調(diào)試步驟跟Chrome下的情況差不離：

image

至此币旧，TypeScript及VS Code的安裝及開發(fā)/調(diào)試環(huán)境設(shè)置就OK了践险。打造好了兵器，是時候開始勤練內(nèi)力了吹菱，接下來就可以邁進TypeScript的世界......

Installation

Get the latest Node.js
Node.js comes with npm package manager. Open command prompt (Win+X -> Command Prompt) and run the following command to install the latest stable version of TypeScript

npm install -g typescript

To check installed packages

npm list -g --depth=0

Configuration

Create an empty folder, open Visual Studio Code and move to that folder.

First thing we need to do is to create tsconfig.jsonfile. In order to do so we'll execute this command in terminal (`Ctrl+``to open terminal)

tsc --init

Create source code. For example main.ts file

<figcaption class="imageCaption" style="display: block; position: relative; left: 0px; width: 700px; top: 0px; margin-top: 10px; color: rgba(0, 0, 0, 0.68); outline: 0px; text-align: center; z-index: 300; --x-height-multiplier:0.342; --baseline-multiplier:0.22; font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "liga", "lnum"; font-size: 16px; line-height: 1.4; letter-spacing: 0px;">Simple TypeScript</figcaption>

Now we want to setup a convenient build process in order to run the project with a couple of buttons. Press Ctrl+Shift+P and type Configure Task Runner, press Enter to select it then TypeScript - tsconfig.json. This will create a file named tasks.json in .vscodefolder. It contains all needed commands and arguments for our build.

This is our project structure after all the steps.

[圖片上傳失敗...(image-fd1123-1549370021630)]

Run

It’s time to finally run the build task. Press Ctrl+Shift+Band if all went well a new file will be created (main.js). In order to see the output we need to feed it into node command.

node main.js

Let’s see it in action!

[圖片上傳失敗...(image-b9b1cd-1549370021630)]

Alrighty! We had fun with command line and eager to try something new. Let’s create a minimal html and change some DOM properties of the page through TypeScript.

最后編輯于：2019.02.06 07:21:59

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末巍虫，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子鳍刷，更是在濱河造成了極大的恐慌占遥，老刑警劉巖，帶你破解...
沈念sama閱讀 217,406評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件输瓜，死亡現(xiàn)場離奇詭異瓦胎，居然都是意外死亡芬萍，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,732評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門搔啊，熙熙樓的掌柜王于貴愁眉苦臉地迎上來柬祠，“玉大人，你說我怎么就攤上這事负芋∑渴ⅲ” “怎么了？”我有些...
開封第一講書人閱讀 163,711評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵示罗，是天一觀的道長惩猫。經(jīng)常有香客問我，道長蚜点，這世上最難降的妖魔是什么轧房？我笑而不...
開封第一講書人閱讀 58,380評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮绍绘，結(jié)果婚禮上奶镶，老公的妹妹穿的比我還像新娘。我一直安慰自己陪拘，他們只是感情好厂镇，可當(dāng)我...
茶點故事閱讀 67,432評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著左刽，像睡著了一般捺信。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上欠痴，一...
開封第一講書人閱讀 51,301評論 1贊 301
城市分裂傳說
那天迄靠，我揣著相機與錄音，去河邊找鬼喇辽。笑死掌挚，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的菩咨。我是一名探鬼主播吠式，決...
沈念sama閱讀 40,145評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼抽米！你這毒婦竟也來了特占？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,008評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤缨硝，失蹤者是張志新（化名）和其女友劉穎摩钙，沒想到半個月后罢低，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體查辩，經(jīng)...
沈念sama閱讀 45,443評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡胖笛，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,649評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了宜岛。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片长踊。...
茶點故事閱讀 39,795評論 1贊 347
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖萍倡，靈堂內(nèi)的尸體忽然破棺而出身弊，到底是詐尸還是另有隱情，我是刑警寧澤列敲，帶...
沈念sama閱讀 35,501評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布阱佛，位于F島的核電站，受9級特大地震影響戴而，放射性物質(zhì)發(fā)生泄漏凑术。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,119評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一所意、第九天我趴在偏房一處隱蔽的房頂上張望淮逊。院中可真熱鬧，春花似錦扶踊、人聲如沸泄鹏。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,731評論 0贊 22
一樁弒父案秧耗，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽备籽。三九已至，卻和暖如春分井，著一層夾襖步出監(jiān)牢的瞬間胶台，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,865評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工杂抽，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留诈唬，地道東北人。一個月前我還...
沈念sama閱讀 47,899評論 2贊 370
代替公主和親
正文我出身青樓缩麸，卻偏偏與公主長得像铸磅，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子杭朱，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,724評論 2贊 354

vscode typescript 環(huán)境搭建

打造TypeScript的Visual Studio Code開發(fā)環(huán)境

1 .2 安裝及開發(fā)環(huán)境配置

1.2.1 安裝TypeScript

1.2.2 安裝其他Node包

1.2.3 配置VS Code的TypeScript開發(fā)環(huán)境

編輯示例代碼

創(chuàng)建TypeScript編譯器配置文件

創(chuàng)建測試頁面

編譯項目

1.2.4 VS Code調(diào)試

1.2.5 瀏覽器調(diào)試

Chrome下的調(diào)試

Firefox下的調(diào)試

Installation

Configuration

Run

推薦閱讀更多精彩內(nèi)容