本篇將簡單介紹一下TypeScript，並記錄開發環境的搭建、使用Visual Studio Code進行一個簡單的Demo開發過程。
第一部分、簡介
TypeScript是一種由微軟開發的自由和開源的編程語言。是JavaScript的一個超集。它在保留JavaScript語言本身特性的基礎上添加了大量靜態語言具有的一些特性，包括但不限於以下幾點：
- 可選的靜態類型
- 枚舉、接口和類
- 命名空間
- 模塊
- Lambda表達式
- 編譯時類型檢查
在2013年6月微軟正式發佈了0.9版。之後在不斷更新的過程中逐漸支持ECMAScript 2015（ES6）標準。
通過利用靜態語言的特性和新標準，使JavaScript開發變得越來越簡單。同時也很好的符合當前前端開發的模塊化、工程化的開發方式和潮流。
第二部分、環境準備
一、安裝Node.js
安裝文件下載地址：Node.js Downloads。TypeScript源碼需要進行編譯以後才能運行，Node.js提供了編譯環境。
二、安裝TypeScript編譯工具
安裝好Node.js後，打開cmd窗口，輸入以下命令
npm install -g typescript
使用npm包管理工具下載TypeScript包並在全局環境下安裝，安裝成功後就可以通過 tsc 命令編譯TypeScript源碼。
可以通過 tsc -v 命令查看當前TypeScript版本。當前最新版本是：1.8
第三部分、使用Visual Studio Code進行開發
以下目錄結構是一個簡單的Demo的結構
主要包括但不限於以下幾個目錄和文件
/ts：TypeScript源碼文件存放的文件夾
/js：編譯之後生成的JavaScript文件存放的文件夾
tsconfig.json：TypeScript編譯配置文件
另外.vscode是VS Code開發工具特有的文件夾，主要用來存放調試時需要用到的配置文件。
一、tsconfig.json
1 { 2 "compilerOptions": { 3 "target": "es5", 4 "noImplicitAny": false, 5 "module": "commonjs", 6 "removeComments": true, 7 "sourceMap": false, 8 "outDir": "js" 9 }, 10 "include":[ 11 "ts" 12 ], 13 "exclude": [ 14 "js" 15 ] 16 }
有幾個重要的屬性需要解釋一下：
- target：編譯之後生成的JavaScript文件需要遵循的標準。有三個候選項：es3、es5、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：編譯時需要包含/剔除的文件夾。
二、添加Demo源文件
在ts文件夾添加 app.ts 和 demo.ts 兩個源文件，目錄結構和源文件內容如下
Demo.ts app.ts三、配置編譯和調試文件
在.vscode裏添加tasks.json文件
1 { 2 // See https://go.microsoft.com/fwlink/?LinkId=733558 3 // for the documentation about the tasks.json format 4 "version": "0.1.0", 5 "command": "tsc", 6 "isShellCommand": true, 7 "args": ["-p", "."], 8 "showOutput": "always", 9 "problemMatcher": "$tsc" 10 }
切換到調試模式，點擊配置按鈕，選擇Node.js環境。因爲接下來的Demo演示都將在Node.js環境下進行。
修改生成的launch.json文件內容，指定啓動入口文件的路徑
1 { 2 "version": "0.2.0", 3 "configurations": [ 4 { 5 "name": "啓動", 6 "type": "node", 7 "request": "launch", 8 "program": "${workspaceRoot}/js/app.js", 9 "stopOnEntry": false, 10 "args": [], 11 "cwd": "${workspaceRoot}", 12 "preLaunchTask": null, 13 "runtimeExecutable": null, 14 "runtimeArgs": [ 15 "--nolazy" 16 ], 17 "env": { 18 "NODE_ENV": "development" 19 }, 20 "externalConsole": false, 21 "sourceMaps": false, 22 "outDir": null 23 }, 24 { 25 // ...... 26 }, 27 { 28 // ...... 29 } 30 ] 31 }
以上配置完成後，使用 Ctrl+Shift+B 啓動編譯，如果VS Code的OUTPUT窗口沒有任何異常信息顯示，則表示編譯成功。在js文件夾裏將會生成編譯後的JavaScript文件
demo.js
1 "use strict"; 2 var Demo = (function () { 3 function Demo(a, b) { 4 this.a = a; 5 this.b = b; 6 } 7 Demo.prototype.sum = function () { 8 return this.a + this.b; 9 }; 10 return Demo; 11 }()); 12 exports.Demo = Demo;
app.js
1 "use strict"; 2 var demo_1 = require('./models/demo'); 3 var demo = new demo_1.Demo(1, 2); 4 console.log(demo.sum());
對比TypeScript源碼文件和生成之後的JavaScript文件，結構發生了較大變化。
啓動調試，查看調試控制檯，輸出了正確的計算結果：3
其他相關內容
當前非常流行的JavaScript模塊規範主要遵循以下兩種：
- CommonJS：同步模式加載模塊，主要應用在服務端。Node.js模塊化就遵循此規範。使用方式： require('模塊名') 。
- AMD：異步模式加載模塊，主要應用在瀏覽器端。RequireJS遵循此標準。使用方式： define(['模塊名1', ...], function('模塊參數1', ....) { })