使用Visual Studio Code搭建TypeScript開發環境
1、TypeScript是干什么的 ?
- TypeScript是由微軟Anders Hejlsberg(安德斯·海爾斯伯格，也是本人的偶像)領銜開發的。
(安德斯·海爾斯伯格是Delphi 和 C#之父，Turbo Pascal 編譯器的主要作者，.NET 概念發起人之一，同時也是TypeScript開源項目的重要領導人。他於1996年加入微軟，目前是 C# 語言的首席架構師和 TypeScript 的核心開發者，獲微軟卓越工程師 Distinguished Engineer 和微軟技術院士 Technical Fellow 稱號。)
-
TypeScript 是微軟開發的 JavaScript 的超集，TypeScript兼容JavaScript，可以載入JavaScript代碼然后運行。TypeScript與JavaScript相比進步的地方 包括：加入注釋，讓編譯器理解所支持的對象和函數，編譯器會移除注釋，不會增加開銷；增加一個完整的類結構，使之更象傳統的面向對象語言。
2、為什么選擇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太熟悉優秀語言的共性了，他所做的取舍值得你信賴。
-
TypeScript有良好的工具支持。以前，只有Visual Studio提供TypeScript工具。現在，情形大為改觀。WebStorm增加了TypeScript支持，Eclipse也有了TypeScript插件，
而且微軟也發布了Sublime Text開發TypeScript插件，Atom也支持TypeScript開發。
3、TypeScript語法特性
-
兼容 ECMAScript 2015（ES6）規范，可選擇編譯成ES6或ES5規范的JavaScript代碼（ECMAScript 3及以上版本）；
-
面向對象，並擁有一些函數式特性；
-
類型語言；
-
實現了注解、泛型等特性；
-
適配大型App構建。
-
類 Classes
-
接口 Interfaces
-
模塊 Modules
-
類型注解 Type annotations
-
編譯時類型檢查 Compile time type checking
-
Arrow 函數 (類似 C# 的 Lambda 表達式)
4、TypeScrip與JavaScript 的區別
-
TypeScript 是 JavaScript 的超集，擴展了 JavaScript 的語法，因此現有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型注解提供編譯時的靜態類型檢查。TypeScript 可處理已有的 JavaScript 代碼，並只對其中的 TypeScript 代碼進行編譯。
-
通過編譯器把TypeScript程序代碼編譯生成JavaScript代碼。
5、安裝Visual Studio Code
- Visual Studio Code (VS Code) 是微軟開發的、免費開源、功能強大的輕量級的IDE。
- 運行環境：Windows 10 (64位)
下載Visual Studio Code (VSCodeSetup-stable.exe)
運行：VSCodeSetup-stable.exe，安裝Visual Studio Code :
6、安裝Node.js
下載Node.js(node-v4.5.0-x64.msi)
運行：node-v4.5.0-x64.msi，安裝Node.js :
7、安裝TypeScript Compiler
- 安裝好Node.js后，可以直接使用npm工具來安裝TypeScript，這個TypeScript的Package其實也是一個Compiler，可以通過這個Complier將typescript編譯成javascript。打開命令提示符cmd，進入控制台(或其他終端Terminal)，輸入指令：
npm install -g typescript
8、更新TypeScript Compiler
- 輸入指令：npm update -g typescript
- 查看版本：tsc -v
9、安裝 Tpyings
- typings 主要是用來獲取.d.ts文件。當typescript使用一個外部JavaScript庫時,會需要這個文件，當然好多的編譯器都用它來增加智能感知能力。
- 輸入指令：npm install -g typings
10、安裝 node 的 .d.ts 庫
- 輸入指令：typings install dt~node –global
11、創建ts_demo項目
- 創建ts_demo目錄
- 在命令行cmd下進入ts_demo目錄
- cd ts_demo
- 輸入：npm init，創建package.json
12、創建 tsconfig.json
- (1)、啟動VS Code
- (2)、選擇菜單 文件/打開文件夾，選擇剛剛創建的ts_demo文件夾
- (3)、雙擊tsconfig.json打開如下圖：
13、修改tsconfig.json
- 把tsconfig.json修改為：
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"allowJs": true
}
,
"exclude": [
"node_modules"
]
}
- target：編譯之后生成的JavaScript文件需要遵循的標准。有三個候選項：es3、es5、es2015。
- noImplicitAny：為false時，如果編譯器無法根據變量的使用來判斷類型時，將用any類型代替。為true時，將進行強類型檢查，無法推斷類型時，提示錯誤。
- module：遵循的JavaScript模塊規范。主要的候選項有：commonjs、AMD和es6。
- removeComments：編譯生成的JavaScript文件是否移除注釋。
- sourceMap：編譯時是否生成對應的source map文件。這個文件主要用於前端調試。當前端js文件被壓縮引用后，出錯時可借助同名的source map文件查找源文件中錯誤位置。
- outDir：編譯輸出JavaScript文件存放的文件夾。
- include、exclude：編譯時需要包含/剔除的文件夾。
14、配置 TypeScript 編譯
- 按ctrl + shift + b編譯, 如果沒有配置過，task, 就會在上面提示(如圖)。
- 選擇【配置任務運行程序】
15、新建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();
16、編譯greeter.ts
- 編譯greeter.ts出錯：
- "檢測到全局安裝的 tsc 編譯器(2.0.3)與 VS 代碼語言服務(1.8.10)版本不匹配。這可能導致不一致的編譯錯誤。"
17、使用新版本TypeScript
在命令行(cmd)下輸入：npm install typescript@2.0.3
-
選擇菜單 文件/首選項/工作區設置
-
settings.json文件修改為：
{
"typescript.tsdk": "node_modules/typescript/lib"
}
18、修改啟動源
- 按F5開始調試會生成： launch.json
- 用VS Code打開項目的launch.json文件，"program"條目，修改如下：
···
"program": "${workspaceRoot}/greeter.js",
···
19、創建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>
20、瀏覽器打開index.html
- 至此，《使用 Visual Studio Code 開發 TypeScript 系列》 第一講 《配置 VS Code 開發 TypeScript》全部介紹完了。
參考資料
打造TypeScript的Visual Studio Code開發環境
如何在vscode 中配置：TypeScript開發node環境
使用Visual Studio Code + Node.js搭建TypeScript開發環境