打造TypeScript的Visual Studio Code開發環境

本文轉自：https://zhuanlan.zhihu.com/p/21611724

作者： 2gua

TypeScript是由微軟大神Anders Hejlsberg（安德斯·海爾斯伯格，丹麥人，Turbo Pascal編譯器的主要作者，Delphi、C#開發領導者，同時也是.NET奠基人之一）領銜開發的。

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

兼容 ECMAScript 2015（ES6）規范，可選擇編譯成ES6或ES5規范的JavaScript代碼（ECMAScript 3及以上版本）；
面向對象，並擁有一些函數式特性；
類型語言；
實現了注解、泛型等特性；
適配大型App構建。

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

工欲善其事，必先利其器，除了一門語言是內力，還需有稱心的利刃為兵器。好馬配好鞍——我覺得TypeScript的最佳開發工具是Visual Studio Code——同屬微軟出品的優秀編輯器，作為一家公司的兩個利器，其搭配使用時渾然天成。最重要的是，微軟當下擁抱開源的力度是越來越大，TypeScript與VS Code都是開源的。同時，VS Code的代碼提示、片段及調試功能也非常棒！

本文將詳細闡述TypeScript與VS Code相結合的開發環境打造之道，為后續的學習提供先決條件。

先總結一下TypeScript開發環境用到的各種工具：

Node——通過npm安裝TypeScript及大量依賴包。從https://nodejs.org/下載並安裝它；如果安裝各種包不方便，可以將安裝源改為國內鏡像，具體方案網絡上已經有很多了，可供參考；
VS Code——從 https://code.visualstudio.com/ 下載並安裝它；
TypeScript——TypeScript語言，后面通過npm安裝；
concurrently——Node包，同時執行命令用。后面通過npm安裝；
lite-server——Node包，輕量級的Node開發服務器。后面通過npm安裝；

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

1 .2 安裝及開發環境配置

1.2.1 安裝TypeScript

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

npm install -g typescript

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

1.2.2 安裝其他Node包

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

package.json是包描述文件。其中列出了應用所需的各種依賴包、待執行腳本，以及其他一些設置內容。編輯其內容為：

{
  "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"——可執行的腳本

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\""——同時執行的命令

"lite": "lite-server"——啟動lite-server服務器

"tsc": "tsc"——執行一次TypeScript編譯

"tsc:w": "tsc -w"——以監控模式運行TypeScript編譯器。后台始終保持進程。一旦TypeScript文件變化即會重編譯

"dependencies"——生產環境中需要的依賴包

"devDependencies"——開發中要使用的安裝包

關於package.json的配置可以參考：這里。

1.2.3 配置VS Code的TypeScript開發環境

VS Code提供了很好的TypeScript開發特性支持。

首先，打開剛才創建的目錄hello-typescript：

可以看到當前VS Code的資源管理器顯示如下：

編輯示例代碼

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

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

hello-typescript.ts代碼文件的內容如下：

/**
 * 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();

創建TypeScript編譯器配置文件

當前TypeScript代碼並不能直接執行，需編譯為JavaScript代碼。而借助VS Code，我們就不用在命令行輸入編譯命令了。為此，在根目錄添加一個tsconfig.json文件。該文件是TypeScript編譯器配置文件。文件內容如下所示：

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

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

"compilerOptions"——編譯器選項；
"target"——編譯目標，如這里編譯為es5代碼；
"module"——處理獨立文件時的模塊加載方式；
"sourceMap"——是否創建map文件以幫助調試；
"exclude"——編譯器會編譯TypeScript文件（.ts或.tsx），通過排除設置里的TypeScript文件不會被編譯。

關於tsconfig.json的進一步信息可以參考：這里。

創建測試頁面

最后，我們還需要創建一個測試頁面index.html來測試我們的程序。

在新創建的index.html鍵入：html:5，按Tab鍵，就會生成好HTML模版文件！然后在body中鍵入：script:src，按Tab鍵，然后加載我們馬上要編譯好的的hello-typescript.ts對應的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無疑非常貼心！