使用Visual Studio Code搭建TypeScript開發環境

時間 2019-11-11

標籤使用 visual studio code 搭建 typescript 開發環境欄目 Visual Studio 简体版

原文原文鏈接

使用Visual Studio Code搭建TypeScript開發環境

一、TypeScript是幹什麼的 ?

TypeScript是由微軟Anders Hejlsberg(安德斯·海爾斯伯格，也是本人的偶像)領銜開發的。
(安德斯·海爾斯伯格是Delphi 和 C#之父，Turbo Pascal 編譯器的主要做者，.NET 概念發起人之一，同時也是TypeScript開源項目的重要領導人。他於1996年加入微軟，目前是 C# 語言的首席架構師和 TypeScript 的核心開發者，獲微軟卓越工程師 Distinguished Engineer 和微軟技術院士 Technical Fellow 稱號。)

安德斯介紹 TypeScript
C#之父Anders首來華：從TypeScript看開源
Delphi、C#之父Anders Hejlsberg首次訪華推廣TypeScript
SegmentFault 創始人祁寧對話 C# 之父 Anders Hejlsberg
TypeScript: 應用級別的JavaScript開發javascript
TypeScript 是微軟開發的 JavaScript 的超集，TypeScript兼容JavaScript，能夠載入JavaScript代碼而後運行。TypeScript與JavaScript相比進步的地方包括：加入註釋，讓編譯器理解所支持的對象和函數，編譯器會移除註釋，不會增長開銷；增長一個完整的類結構，使之更象傳統的面嚮對象語言。html

二、爲何選擇TypeScript ?

JavaScript 只是一個腳本語言，並不是設計用於開發大型 Web 應用，JavaScript 沒有提供類和模塊的概念，而 TypeScript 擴展了 JavaScript 實現了這些特性。
TypeScript 主要特色包括：
TypeScript 是微軟推出的開源語言，使用 Apache 受權協議，
TypeScript 是 JavaScript 的超集。
TypeScript 增長了可選類型、類和模塊
TypeScript 可編譯成可讀的、標準的 JavaScript
TypeScript 支持開發大規模 JavaScript 應用
TypeScript 設計用於開發大型應用，並保證編譯後的 JavaScript 代碼兼容性
TypeScript 擴展了 JavaScript 的語法，所以已有的 JavaScript 代碼可直接與 TypeScript 一塊兒運行無需更改
TypeScript 文件擴展名是 ts，而 TypeScript 編譯器會編譯成 js 文件
TypeScript 語法與 JScript .NET 相同
TypeScript 易學易於理解前端
網上流傳一句話，Angular 2選擇了TypeScript做爲主語言。若是你是個C#程序員，必定會對它的語法感受似曾相識。沒錯，TypeScript和C#、Delphi有同一個「爹」 —— 傳奇人物Anders Hejlsberg。即便是Java程序員，也不會以爲陌生：強類型、類、接口、註解等等，無一不是後端程序員們耳熟能詳的概念。說到底，並無什麼前端語言和後端語言，在語言領域耕耘多年的Anders太熟悉優秀語言的共性了，他所作的取捨值得你信賴。html5
TypeScript的崛起java
TypeScript有良好的工具支持。之前，只有Visual Studio提供TypeScript工具。如今，情形大爲改觀。WebStorm增長了TypeScript支持，Eclipse也有了TypeScript插件，
並且微軟也發佈了Sublime Text開發TypeScript插件，Atom也支持TypeScript開發。node
微軟與Google達成JavaScript框架合做：將共同打造Angular 2
Angular 2：基於 TypeScript
Facebook聯合創始人的二次創業，他們爲何轉向TypeScriptgit

三、TypeScript語法特性

兼容 ECMAScript 2015（ES6）規範，可選擇編譯成ES6或ES5規範的JavaScript代碼（ECMAScript 3及以上版本）；
面向對象，並擁有一些函數式特性；
類型語言；
實現了註解、泛型等特性；
適配大型App構建。程序員
類 Classes
接口 Interfaces
模塊 Modules
類型註解 Type annotations
編譯時類型檢查 Compile time type checking
Arrow 函數 (相似 C# 的 Lambda 表達式)es6

四、TypeScrip與JavaScript 的區別

TypeScript 是 JavaScript 的超集，擴展了 JavaScript 的語法，所以現有的 JavaScript 代碼可與 TypeScript 一塊兒工做無需任何修改，TypeScript 經過類型註解提供編譯時的靜態類型檢查。TypeScript 可處理已有的 JavaScript 代碼，並只對其中的 TypeScript 代碼進行編譯。github
經過編譯器把TypeScript程序代碼編譯生成JavaScript代碼。
在線編寫測試TypeScript

五、安裝Visual Studio Code

Visual Studio Code (VS Code) 是微軟開發的、免費開源、功能強大的輕量級的IDE。
運行環境：Windows 10 (64位)

下載Visual Studio Code (VSCodeSetup-stable.exe)

運行：VSCodeSetup-stable.exe，安裝Visual Studio Code :

六、安裝Node.js

下載Node.js(node-v4.5.0-x64.msi)

運行：node-v4.5.0-x64.msi，安裝Node.js :

七、安裝TypeScript Compiler

安裝好Node.js後，能夠直接使用npm工具來安裝TypeScript，這個TypeScript的Package其實也是一個Compiler，能夠經過這個Complier將typescript編譯成javascript。打開命令提示符cmd，進入控制檯(或其餘終端Terminal)，輸入指令：
npm install -g typescript

八、更新TypeScript Compiler

輸入指令：npm update -g typescript
查看版本：tsc -v

九、安裝 Tpyings

typings 主要是用來獲取.d.ts文件。當typescript使用一個外部JavaScript庫時,會須要這個文件，固然好多的編譯器都用它來增長智能感知能力。
輸入指令：npm install -g typings

十、安裝 node 的 .d.ts 庫

輸入指令：typings install dt~node –global

十一、建立ts_demo項目

建立ts_demo目錄
在命令行cmd下進入ts_demo目錄
cd ts_demo
輸入：npm init，建立package.json

十二、建立 tsconfig.json

(1)、啓動VS Code
(2)、選擇菜單文件/打開文件夾，選擇剛剛建立的ts_demo文件夾
(3)、雙擊tsconfig.json打開以下圖：

1三、修改tsconfig.json

把tsconfig.json修改成：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true,
        "allowJs": true
    }
    ,
    "exclude": [
        "node_modules"
    ]
}

target：編譯以後生成的JavaScript文件須要遵循的標準。有三個候選項：es三、es五、es2015。
noImplicitAny：爲false時，若是編譯器沒法根據變量的使用來判斷類型時，將用any類型代替。爲true時，將進行強類型檢查，沒法推斷類型時，提示錯誤。
module：遵循的JavaScript模塊規範。主要的候選項有：commonjs、AMD和es6。
removeComments：編譯生成的JavaScript文件是否移除註釋。
sourceMap：編譯時是否生成對應的source map文件。這個文件主要用於前端調試。當前端js文件被壓縮引用後，出錯時可藉助同名的source map文件查找源文件中錯誤位置。
outDir：編譯輸出JavaScript文件存放的文件夾。
include、exclude：編譯時須要包含/剔除的文件夾。

1四、配置 TypeScript 編譯

按ctrl + shift + b編譯, 若是沒有配置過，task, 就會在上面提示(如圖)。

選擇【配置任務運行程序】

1五、新建greeter.ts文件

class Student {
    firstName : string;
    lastName : string;

    constructor(fiestName : string,  lastName : string) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }

    greeter() {
        return "Hello，您好" + this.firstName + " " + this.lastName;
    }
}

var user = new Student("王", "小明");

// document.body.innerHTML = user.greeter();
document.body.innerHTML = user.greeter();

1六、編譯greeter.ts

編譯greeter.ts出錯：
"檢測到全局安裝的 tsc 編譯器(2.0.3)與 VS 代碼語言服務(1.8.10)版本不匹配。這可能致使不一致的編譯錯誤。"

1七、使用新版本TypeScript

在命令行(cmd)下輸入：npm install typescript@2.0.3

選擇菜單文件/首選項/工做區設置
settings.json文件修改成：

{
    "typescript.tsdk": "node_modules/typescript/lib"
}

1八、修改啓動源

按F5開始調試會生成： launch.json
用VS Code打開項目的launch.json文件，"program"條目，修改以下：
···
"program": "${workspaceRoot}/greeter.js",
···

1九、建立index.html

輸入：html:5，按tab鍵回自動產生index.html文檔，而後修改以下：

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8"/>
            <title>greeter</title>
    </head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>