VS Code 運行 TypeScript 操做指南

時間 2019-11-25

標籤 code 運行 typescript 指南简体版

原文原文鏈接

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

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

兼容 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開發的！html

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

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

先總結一下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，接下來咱們開始安裝其他工具。web

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

1.2.1 安裝TypeScript

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

npm install -g typescript

本文寫做時TypeScript的版本爲1.8.10。typescript

1.2.2 安裝其餘Node包

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

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無疑很是貼心！

編譯項目

在命令行窗口進入項目根目錄，執行npm start，將看到會自動打開瀏覽器窗口：

若是調整TypeScript程序，工具咱們前面的配置，服務器會自動識別咱們的變更並刷新瀏覽器，不須要咱們手動刷新瀏覽器：

再來看看如今的項目狀況：

項目裏多了兩個文件，一個是TypeScript編譯後對應的JavaScript文件，也就是咱們前面包含進測試頁面inde.html裏的。另外一個.map文件後面立刻會用到。

開發環境幾乎配置妥妥了，剩下還須要看看調試TypeScript程序。

1.2.4 VS Code調試

點擊Debug按鈕（或者Ctrl+Shift+d），就會出現如下界面：

點擊綠色小三角（或F5）就開始調試。首次會彈出調試配置，請選擇「Node.js」：

此時會建立.vscode/launch.json文件，首先要配置一下該文件。將"program"設置爲hello-typescript.js，"sourceMaps"設置爲true：

如今先試着在文件中設置一個斷點（在圖示位置點擊一下便可，再次點擊就關閉斷點，如是切換）：

而後再次點擊綠色小三角進行調試，以後試着選擇「單步跳過」命令，看看左邊的「變量」窗口發生的變化：

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

注意.map文件是調試用的文件。同時，要進行.ts文件的調試，在.vscode/launch.json文件中，請將"sourceMaps"設置爲true。

1.2.5 瀏覽器調試

Chrome下的調試

打開Chrome，Ctrl+Shift+i打開開發者工具，選擇Sources頁面，打開hello-typescript.ts,設置斷點，再次刷新頁面，以後點擊「單步跳過」命令，看看效果：

###　Firefox下的調試

雖然你們都喜歡Chrome，但做爲Firefox老用戶，一直不捨Firefox，Firefox也是我主要瀏覽器。調試步驟跟Chrome下的狀況差不離：

至此，TypeScript及VS Code的安裝及開發/調試環境設置就OK了。打造好了兵器，是時候開始勤練內力了，接下來就能夠邁進TypeScript的世界......

1.2.6 如何使用多條命令

使用 concurrently 便可。
須要安裝 concurrently

npm install -g concurrently

package.json的 scripts:

"command1":"aaaaa",  
"command2":"bbbbb",  
"test":"concurrently \"npm run command1\" \"npm run command2\""

而後 npm test就能夠同時監聽 aaaaa 和 bbbbb 了.

1.2.7 關於 --save 和 --save-dev的區別

--save是對生產環境所需依賴的聲明(開發應用中使用的框架，庫),

--save-dev是對開發環境所需依賴的聲明(構建工具，測試工具).

正常使用npm install時，會下載dependencies和devDependencies中的模塊，

當使用npm install --production或者註明NODE_ENV變量值爲production時，只會下載dependencies中的模塊。

1.2.8 安裝http-server

咱們知道寫typescript有時要用的瀏覽器進行預覽，哪咱們還須要安裝一下http服務。

 
npm install -g http-server

這樣http服務就裝好了，萬能的npm有沒有？

如何啓動？輸入：http-server 回車就好了，http://localhost:8080/

如何關閉？快捷鍵：ctrl+c

更多使用方法和命令，能夠輸入 http-sever -help 來查看。

1.2.10 關於 lite-server

除了上面這個之外，還有另外一個可推薦的是：lite-server

輕量級的僅適用於開發的 node 服務器，它僅支持 web app, 它可以爲你打開瀏覽器, 當你的html或是JavaScript文件變化時，它會識別到並自動幫你刷新瀏覽器, 還能使用套接字自動注入變化的CSS, 當路由沒有被找到時，它將自動後退頁面。

安裝與使用，如下是被推薦的安裝lite-server的方式:

npm install -g lite-server --save-dev

--save-dev 選項，將會把安裝的環境寫入到pakage.json裏面

在你的項目中的 package.json 文件中添加一個「script」入口:

"scripts": {    
    "dev": "lite-server"
  },

cript 入口, 你就能夠經過如下命令來啓動 lite-server 了:
lite-server

npm run dev

lite-server 使用BrowserSync, 它是容許你去覆蓋默認的配置，這得經過你項目裏的文件 bs-config.json 或 bs-config.js 來完成

lite-server -c configs/my-bs-config.js

舉例來講, 要改變端口號, 被監測的文件路徑, 以及你項目的base路徑, 在你項目中建立 bs-config.json 文件:

{
  "port": 8000,
  "files": ["./src/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./src" }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。