TypeScript學習筆記（一） - 環境搭建

本篇將簡單介紹一下TypeScript，並記錄開發環境的搭建、使用Visual Studio Code進行一個簡單的Demo開發過程。

第一部分、簡介

TypeScript是一種由微軟開發的自由和開源的編程語言。是JavaScript的一個超集。它在保留JavaScript語言自己特性的基礎上添加了大量靜態語言具備的一些特性，包括但不限於如下幾點：

• • 可選的靜態類型
  • 枚舉、接口和類
  • 命名空間
  • 模塊
  • Lambda表達式
  • 編譯時類型檢查

在2013年6月微軟正式發佈了0.9版。以後在不斷更新的過程當中逐漸支持ECMAScript 2015（ES6）標準。

經過利用靜態語言的特性和新標準，使JavaScript開發變得愈來愈簡單。同時也很好的符合當前前端開發的模塊化、工程化的開發方式和潮流。

 

第二部分、環境準備

1、安裝Node.js

安裝文件下載地址：Node.js Downloads。TypeScript源碼須要進行編譯之後才能運行，Node.js提供了編譯環境。

2、安裝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開發工具特有的文件夾，主要用來存放調試時須要用到的配置文件。

1、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文件須要遵循的標準。有三個候選項：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：編譯時須要包含/剔除的文件夾。

2、添加Demo源文件

在ts文件夾添加 app.ts 和 demo.ts 兩個源文件，目錄結構和源文件內容以下

 1 /**
 2  * Demo
 3  */
 4 class Demo {
 5     a: number;
 6     b: number;
 7 
 8     constructor(a: number, b: number) {
 9         this.a = a;
10         this.b = b;
11     }
12 
13     sum(): number {
14         return this.a + this.b;
15     }
16 }
17 
18 export {Demo};

Demo.ts

1 import {Demo} from './models/demo';
2 const demo = new Demo(1, 2);
3 console.log(demo.sum());

app.ts

3、配置編譯和調試文件

在.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', ....) { })