使用Visual Studio Code + Node.js搭建TypeScript開發(fā)環(huán)境

paulli3 發(fā)布于2019-08-22 10:33 / 2856人閱讀

摘要：簡(jiǎn)介本文將簡(jiǎn)述如何使用開發(fā)工具來(lái)搭建一套的開發(fā)環(huán)境，主要的目的是落地留痕，同時(shí)也希望能對(duì)一些剛?cè)腴T的小伙伴有一定的參考價(jià)值。安德斯海爾斯伯格，的首席架構(gòu)師，已工作于的開發(fā)。為大型應(yīng)用之開發(fā)而設(shè)計(jì)，可以編譯成來(lái)確保兼容性。

簡(jiǎn)介

本文將簡(jiǎn)述如何使用vscode [Visual Studio Code]開發(fā)工具來(lái)搭建一套TypeScript的開發(fā)環(huán)境，主要的目的是落地留痕，同時(shí)也希望能對(duì)一些剛?cè)腴T的小伙伴有一定的參考價(jià)值。[注意：Windows，Linux，OS X在操作上基本上一致，只是工具的安裝有所不同，這里僅以Windows平臺(tái)作為本次教程的演示環(huán)境]

TypeScript是一種由微軟開發(fā)的自由和開源的編程語(yǔ)言，通常我們認(rèn)為其是JavaScript的一個(gè)超集，且本質(zhì)上向這個(gè)語(yǔ)言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭０驳滤埂ず査共瘢珻#的首席架構(gòu)師，已工作于TypeScript的開發(fā)。
TypeScript為大型應(yīng)用之開發(fā)而設(shè)計(jì)，可以編譯成javascript來(lái)確保兼容性。

準(zhǔn)備工作

Node.js Node.js - Official Site

Visual Studio Code Visual Studio Code - Official Site

安裝Node.js

一方面提供一個(gè)開發(fā)的Runtime；另一方面提供的npm工具，我們可以利用這個(gè)工具來(lái)安裝TypeScript。

下載Node.js安裝包

首先按照準(zhǔn)備工作里面提供的鏈接下載對(duì)應(yīng)平臺(tái)的Node.js安裝包

安裝Node.js并檢測(cè)是否安裝成功

安裝Node.js，安裝過(guò)程基本上是下一步，即可完成，然后在CMD中運(yùn)行如下命令：node -v 來(lái)查詢當(dāng)前node.js的版本號(hào)，然后輸出如圖所示的結(jié)果就表示node.js安裝成功，接著可以輸入命令：npm -v 來(lái)查詢當(dāng)前npm工具的版本號(hào)[可能需要時(shí)間稍長(zhǎng)點(diǎn)]，便會(huì)輸出如圖所示的結(jié)果表示npm工具可用

設(shè)置node.js的npm安裝package的全局路徑[非必須]

由于npm安裝工具默認(rèn)會(huì)跑到C盤[因?yàn)閚pmrc文件中默認(rèn)的設(shè)置為：prefix=${APPDATA} pm]，這樣有時(shí)可能會(huì)因?yàn)橄到y(tǒng)權(quán)限的問(wèn)題，導(dǎo)致不能正常成功的安裝某些工具，那么我們可以先將npm安裝的全局路徑自定設(shè)置一下，比如：我們可以在nodejs的目錄下[即你的node.js安裝后的根目錄]新建兩個(gè)目錄：node_global，node_cache，然后找到nodejs目錄下的node_modules/npm目錄下名為npmrc 或者 .npmrc文件，[為安全，我們可以先將該文件copy一個(gè)副本出來(lái)進(jìn)行備份]使用文本編輯器打開，修改并新增如下：prefix 和 cache 分別對(duì)應(yīng)之前新建的目錄node_global 和 node_cahce

設(shè)置package的環(huán)境變量[有必要]

通過(guò)步驟3設(shè)置后，后續(xù)在安裝工具的時(shí)候，比如安裝TypeScript，最終會(huì)安裝到node_global中，所以為了后續(xù)使用工具命令行，我們可以配置一個(gè)環(huán)境變量：
首先新建一個(gè)NODE_PATH -> NODE_PATH=D:EasBuilding odejs ode_global，然后在Path下新增%NODE_PATH%

查看typescript版本

[這里只是為了說(shuō)明問(wèn)題，可不用進(jìn)行這一步] 打開CMD，運(yùn)行命令：tsc -v，這里不能正常像是版本號(hào)，這是由于這里還沒有安裝typescript，所以我們接下來(lái)就先安裝TypeScript Compiler

安裝TypeScript 安裝TypeScript Compiler

在前面安裝好Node.js后，我們可以直接使用npm工具來(lái)安裝TypeScript，這個(gè)TypeScript的Package其實(shí)也是一個(gè)Compiler，我們可以通過(guò)這個(gè)Complier將typescript編譯成javascript。打開命令提示符CMD(或其他終端Terminal)，輸入指令：npm install -g typescript，稍等片刻即可完成TypeScript Compiler的安裝。

更新TypeScript Compiler

如上圖所示，下載的TypeScript版本為1.8.10，在官網(wǎng)，該版本為最新穩(wěn)定版，所以不需要更新，如果我們下載的版本小于這個(gè)版本，我們可以使用如下命令來(lái)進(jìn)行更新：npm update -g typescript

安裝Visual Studio Code 下載Visual Studio Code安裝包并安裝

首先按照準(zhǔn)備工作里面提供的鏈接下載對(duì)應(yīng)平臺(tái)的vscode安裝包

我的第一個(gè)TypeScript程序 新建一個(gè)workspace工作目錄

這里我先在桌面上新建一個(gè)DemoModules的目錄來(lái)存放一些我的Demo Projects，然后選中DemoModules右鍵使用 vscode 打開或者打開CMD，切換到DemoModules下，然后輸入命令：code . 既可以使用 vscode 打開DemoModules目錄。

接著，在該目錄下新建一個(gè)名為TS_DEMO的目錄：

創(chuàng)建我的第一個(gè)typescript文件

在TS_DEMO下新建一個(gè)名為greeter.ts的文件，并輸入如下代碼：

我們發(fā)現(xiàn)這就是一個(gè)簡(jiǎn)單的javascript code，那么我繼續(xù)改造一下這個(gè)代碼，弄得稍微復(fù)雜點(diǎn)，加入接口interface和類class：

繼續(xù)在該目錄下新建一個(gè)index.html的文件，并在body中引入greeter.js腳本：

編譯typescript文件

首先在TS_DEMO目錄下創(chuàng)建一個(gè)名為tsconfig.json的文件，可以手動(dòng)創(chuàng)建該文件，并輸入如下代碼：

也可以使用命令自動(dòng)創(chuàng)建這個(gè)配置文件，CMD中切換到TS_DEMO目錄，然后輸入命令：tsc -init 即可自動(dòng)創(chuàng)建

接下來(lái)我們繼續(xù)輸入編譯命令，編譯greeter.ts；輸入指令：tsc -w greeter.ts, 其中-w是watch監(jiān)控的意思，當(dāng)typescript文件內(nèi)容發(fā)生改變時(shí)會(huì)自動(dòng)進(jìn)行編譯。

我們可以看到，TS_DEMO目錄下多了一個(gè).js后綴的同名文件，這就是typescript編譯后的javascript文件。

同時(shí)我們還可以更改tsconfig.json中的target屬性，調(diào)整編譯出來(lái)的javascript版本

最后我們將index.html用Chrome或者Firefox打開看看效果：

YES! I GOT IT!! YOU GOT IT!! 參考資料

http://www.open-open.com/lib/...

https://www.typescriptlang.or...

https://code.visualstudio.com...