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

本篇將簡單介紹一下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

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

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

• • 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
 */
class Demo {
    a: number;
    b: number;

    constructor(a: number, b: number) {
        this.a = a;
        this.b = b;
    }

    sum(): number {
        return this.a + this.b;
    }
}

export {Demo};

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

三、配置編譯和調試文件

在.vscode里添加tasks.json文件

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "always",
    "problemMatcher": "$tsc"
}

切換到調試模式，點擊配置按鈕，選擇Node.js環境。因為接下來的Demo演示都將在Node.js環境下進行。

修改生成的launch.json文件內容，指定啟動入口文件的路徑

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "啟動",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/js/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            // ......
        },
        {
           // ......
        }
    ]
}

以上配置完成后，使用 Ctrl+Shift+B 啟動編譯，如果VS Code的OUTPUT窗口沒有任何異常信息顯示，則表示編譯成功。在js文件夾里將會生成編譯后的JavaScript文件

demo.js

"use strict";
var Demo = (function () {
    function Demo(a, b) {
        this.a = a;
        this.b = b;
    }
    Demo.prototype.sum = function () {
        return this.a + this.b;
    };
    return Demo;
}());
exports.Demo = Demo;

app.js

"use strict";
var demo_1 = require('./models/demo');
var demo = new demo_1.Demo(1, 2);
console.log(demo.sum());

對比TypeScript源碼文件和生成之后的JavaScript文件，結構發生了較大變化。

啟動調試，查看調試控制台，輸出了正確的計算結果：3

 

 

其他相關內容

當前非常流行的JavaScript模塊規范主要遵循以下兩種：

• • CommonJS：同步模式加載模塊，主要應用在服務端。Node.js模塊化就遵循此規范。使用方式： require('模塊名') 。
  • AMD：異步模式加載模塊，主要應用在瀏覽器端。RequireJS遵循此標准。使用方式： define(['模塊名1', ...], function('模塊參數1', ....) { })