使用Visual Studio Code + Node.js搭建TypeScript開發環境

Visual Studio Code搭建Typescript開發環境 —— 相關文章：

http://www.cnblogs.com/sunjie9606/p/5945540.html 

[注意：這裏僅以Windows平臺做爲本次教程的演示環境]

原文地址：https://segmentfault.com/a/1190000006124164 

準備工做

• Node.js Node.js - Official Site

• Visual Studio Code Visual Studio Code - Official Site

安裝Node.js

一方面提供一個開發的Runtime；另外一方面提供的npm工具，咱們能夠利用這個工具來安裝TypeScript。

下載Node.js安裝包

首先按照準備工做裏面提供的連接下載對應平臺的Node.js安裝包

安裝Node.js並檢測是否安裝成功

安裝Node.js，安裝過程基本上是下一步，便可完成，而後在CMD中運行以下命令：node -v 來查詢當前node.js的版本號，而後輸出如圖所示的結果就表示node.js安裝成功，接着能夠輸入命令：npm -v 來查詢當前npm工具的版本號[可能須要時間稍長點]，便會輸出如圖所示的結果表示npm工具可用

 

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

因爲npm安裝工具默認會跑到C盤[由於npmrc文件中默認的設置爲：prefix=${APPDATA}\npm]，這樣有時可能會由於系統權限的問題，致使不能正常成功的安裝某些工具，那麼咱們能夠先將npm安裝的全局路徑自定設置一下，好比：咱們能夠在nodejs的目錄下[即你的node.js安裝後的根目錄]新建兩個目錄：node_global，node_cache，而後找到nodejs目錄下的node_modules/npm目錄下名爲npmrc 或者 .npmrc文件，[爲安全，咱們能夠先將該文件copy一個副本出來進行備份]使用文本編輯器打開，修改並新增以下：prefix 和 cache 分別對應以前新建的目錄node_global 和 node_cahce 

 

設置package的環境變量[有必要]

經過步驟3設置後，後續在安裝工具的時候，好比安裝TypeScript，最終會安裝到node_global中，因此爲了後續使用工具命令行，咱們能夠配置一個環境變量：
首先新建一個NODE_PATH -> NODE_PATH=D:\EasBuilding\nodejs\node_global，而後在Path下新增%NODE_PATH%

查看typescript版本

[這裏只是爲了說明問題，可不用進行這一步] 打開CMD，運行命令：tsc -v，這裏不能正常像是版本號，這是因爲這裏尚未安裝typescript，因此咱們接下來就先安裝TypeScript Compiler

安裝TypeScript

安裝TypeScript Compiler

在前面安裝好Node.js後，咱們能夠直接使用npm工具來安裝TypeScript，這個TypeScript的Package其實也是一個Compiler，咱們能夠經過這個Complier將typescript編譯成javascript。打開命令提示符CMD(或其餘終端Terminal)，輸入指令：npm install -g typescript，稍等片刻便可完成TypeScript Compiler的安裝。

 

更新TypeScript Compiler

如上圖所示，下載的TypeScript版本爲1.8.10，在官網，該版本爲最新穩定版，因此不須要更新，若是咱們下載的版本小於這個版本，咱們可使用以下命令來進行更新：npm update -g typescript

 

安裝Visual Studio Code

下載Visual Studio Code安裝包並安裝

首先按照準備工做裏面提供的連接下載對應平臺的vscode安裝包

 

個人第一個TypeScript程序

新建一個workspace工做目錄

這裏我先在桌面上新建一個DemoModules的目錄來存放一些個人Demo Projects，而後選中DemoModules右鍵使用 vscode 打開或者打開CMD，切換到DemoModules下，而後輸入命令：code . 既可使用 vscode 打開DemoModules目錄。

 

接着，在該目錄下新建一個名爲TS_DEMO的目錄：

 

建立個人第一個typescript文件

在TS_DEMO下新建一個名爲greeter.ts的文件，並輸入以下代碼：

class Programmer {
    name:string;

    study() {
        console.log(name + "學習");
    }
}

var p1 = new Programmer();
p1.name = "李四";
p1.study();

var p2 = new Programmer();
p2.name = "韓梅梅";
p2.study();

　　

繼續在該目錄下新建一個index.html的文件，並在body中引入greeter.js腳本：

編譯typescript文件

首先在TS_DEMO目錄下建立一個名爲tsconfig.json的文件，能夠手動建立該文件，並輸入以下代碼：

有幾個重要的屬性須要解釋一下：

• target：編譯以後生成的JavaScript文件須要遵循的標準。有三個候選項：es三、es五、es2015。
• noImplicitAny：爲false時，若是編譯器沒法根據變量的使用來判斷類型時，將用any類型代替。爲true時，將進行強類型檢查，沒法推斷類型時，提示錯誤。
• module：遵循的JavaScript模塊規範。主要的候選項有：commonjs、AMD和es2015。爲了後面與node.js保持一致，咱們這裏選用commonjs。
• removeComments：編譯生成的JavaScript文件是否移除註釋。
• sourceMap：編譯時是否生成對應的source map文件。這個文件主要用於前端調試。當前端js文件被壓縮引用後，出錯時可藉助同名的source map文件查找源文件中錯誤位置。
• outDir：編譯輸出JavaScript文件存放的文件夾。
• include、exclude：編譯時須要包含/剔除的文件夾。

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "module": "commonjs",
        "removeComments": true,
        "sourceMap": false,
        "outDir": "Golang/TypeScript/"
     },
     "exclude": [
         "node_modules"
     ]
     //"include":[
     //     "ts"
     // ],
     //"exclude": [
     //     "js"
     // ]
 }

也可使用命令自動建立這個配置文件，CMD中切換到TS_DEMO目錄，而後輸入命令：tsc -init 便可自動建立

接下來咱們繼續輸入編譯命令，編譯greeter.ts；輸入指令：tsc -w greeter.ts, 其中-w是watch監控的意思，當typescript文件內容發生改變時會自動進行編譯。

咱們能夠看到，TS_DEMO目錄下多了一個.js後綴的同名文件，這就是typescript編譯後的javascript文件。

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