Visual Studio Code搭建TypeScript开发环境
轉(zhuǎn)載 http://www.cnblogs.com/sunjie9606/p/5945540.html
?
?
使用Visual Studio Code搭建TypeScript開發(fā)環(huán)境
1、TypeScript是干什么的 ?
- TypeScript是由微軟Anders Hejlsberg(安德斯·海爾斯伯格，也是本人的偶像)領(lǐng)銜開發(fā)的。
(安德斯·海爾斯伯格是Delphi?和?C#之父，Turbo Pascal?編譯器的主要作者，.NET?概念發(fā)起人之一，同時(shí)也是TypeScript開源項(xiàng)目的重要領(lǐng)導(dǎo)人。他于1996年加入微軟，目前是?C#?語(yǔ)言的首席架構(gòu)師和?TypeScript?的核心開發(fā)者，獲微軟卓越工程師?Distinguished Engineer?和微軟技術(shù)院士?Technical Fellow?稱號(hào)。)
- 安德斯介紹 TypeScript
- C#之父Anders首來(lái)華：從TypeScript看開源
- Delphi、C#之父Anders Hejlsberg首次訪華 推廣TypeScript
- SegmentFault 創(chuàng)始人祁寧對(duì)話 C# 之父 Anders Hejlsberg
-
TypeScript: 應(yīng)用級(jí)別的JavaScript開發(fā)
-
TypeScript 是微軟開發(fā)的 JavaScript 的超集，TypeScript兼容JavaScript，可以載入JavaScript代碼然后運(yùn)行。TypeScript與JavaScript相比進(jìn)步的地方 包括：加入注釋，讓編譯器理解所支持的對(duì)象和函數(shù)，編譯器會(huì)移除注釋，不會(huì)增加開銷；增加一個(gè)完整的類結(jié)構(gòu)，使之更象傳統(tǒng)的面向?qū)ο笳Z(yǔ)言。
2、為什么選擇TypeScript ?
- JavaScript 只是一個(gè)腳本語(yǔ)言，并非設(shè)計(jì)用于開發(fā)大型 Web 應(yīng)用，JavaScript 沒(méi)有提供類和模塊的概念，而 TypeScript 擴(kuò)展了 JavaScript 實(shí)現(xiàn)了這些特性。
-
TypeScript 主要特點(diǎn)包括：
TypeScript 是微軟推出的開源語(yǔ)言，使用 Apache 授權(quán)協(xié)議，
TypeScript 是 JavaScript 的超集。
TypeScript 增加了可選類型、類和模塊
TypeScript 可編譯成可讀的、標(biāo)準(zhǔn)的 JavaScript
TypeScript 支持開發(fā)大規(guī)模 JavaScript 應(yīng)用
TypeScript 設(shè)計(jì)用于開發(fā)大型應(yīng)用，并保證編譯后的 JavaScript 代碼兼容性
TypeScript 擴(kuò)展了 JavaScript 的語(yǔ)法，因此已有的 JavaScript 代碼可直接與 TypeScript 一起運(yùn)行無(wú)需更改
TypeScript 文件擴(kuò)展名是 ts，而 TypeScript 編譯器會(huì)編譯成 js 文件
TypeScript 語(yǔ)法與 JScript .NET 相同
TypeScript 易學(xué)易于理解 -
網(wǎng)上流傳一句話，Angular 2選擇了TypeScript作為主語(yǔ)言。如果你是個(gè)C#程序員，一定會(huì)對(duì)它的語(yǔ)法感覺(jué)似曾相識(shí)。沒(méi)錯(cuò)，TypeScript和C#、Delphi有同一個(gè)“爹” —— 傳奇人物Anders Hejlsberg。即使是Java程序員，也不會(huì)覺(jué)得陌生：強(qiáng)類型、類、接口、注解等等，無(wú)一不是后端程序員們耳熟能詳?shù)母拍睢Ｕf(shuō)到底，并沒(méi)有什么前端語(yǔ)言和后端語(yǔ)言，在語(yǔ)言領(lǐng)域耕耘多年的Anders太熟悉優(yōu)秀語(yǔ)言的共性了，他所做的取舍值得你信賴。
-
TypeScript的崛起
-
TypeScript有良好的工具支持。以前，只有Visual Studio提供TypeScript工具。現(xiàn)在，情形大為改觀。WebStorm增加了TypeScript支持，Eclipse也有了TypeScript插件，
而且微軟也發(fā)布了Sublime Text開發(fā)TypeScript插件，Atom也支持TypeScript開發(fā)。 - 微軟與Google達(dá)成JavaScript框架合作：將共同打造Angular 2
- Angular 2：基于 TypeScript
-
Facebook聯(lián)合創(chuàng)始人的二次創(chuàng)業(yè)，他們?yōu)槭裁崔D(zhuǎn)向TypeScript
3、TypeScript語(yǔ)法特性
- 兼容 ECMAScript 2015（ES6）規(guī)范，可選擇編譯成ES6或ES5規(guī)范的JavaScript代碼（ECMAScript 3及以上版本）；
- 面向?qū)ο?#xff0c;并擁有一些函數(shù)式特性；
- 類型語(yǔ)言；
- 實(shí)現(xiàn)了注解、泛型等特性；
-
適配大型App構(gòu)建。
- 類 Classes
- 接口 Interfaces
- 模塊 Modules?
- 類型注解 Type annotations
- 編譯時(shí)類型檢查 Compile time type checking?
-
Arrow 函數(shù) (類似 C# 的 Lambda 表達(dá)式)
4、TypeScrip與JavaScript 的區(qū)別
-
TypeScript 是 JavaScript 的超集，擴(kuò)展了 JavaScript 的語(yǔ)法，因此現(xiàn)有的 JavaScript 代碼可與 TypeScript 一起工作無(wú)需任何修改，TypeScript 通過(guò)類型注解提供編譯時(shí)的靜態(tài)類型檢查。TypeScript 可處理已有的 JavaScript 代碼，并只對(duì)其中的 TypeScript 代碼進(jìn)行編譯。
- 通過(guò)編譯器把TypeScript程序代碼編譯生成JavaScript代碼。
-
在線編寫測(cè)試TypeScript
5、安裝Visual Studio Code
- Visual Studio Code (VS Code) 是微軟開發(fā)的、免費(fèi)開源、功能強(qiáng)大的輕量級(jí)的IDE。
- 運(yùn)行環(huán)境：Windows 10 (64位)
下載Visual Studio Code (VSCodeSetup-stable.exe)
運(yùn)行：VSCodeSetup-stable.exe，安裝Visual Studio Code :
6、安裝Node.js
下載Node.js(node-v4.5.0-x64.msi)
運(yùn)行：node-v4.5.0-x64.msi，安裝Node.js :
7、安裝TypeScript Compiler
- 安裝好Node.js后，可以直接使用npm工具來(lái)安裝TypeScript，這個(gè)TypeScript的Package其實(shí)也是一個(gè)Compiler，可以通過(guò)這個(gè)Complier將typescript編譯成javascript。打開命令提示符cmd，進(jìn)入控制臺(tái)(或其他終端Terminal)，輸入指令：
npm install -g typescript
8、更新TypeScript Compiler
- 輸入指令：npm update -g typescript
- 查看版本：tsc -v
9、安裝 Tpyings
- typings 主要是用來(lái)獲取.d.ts文件。當(dāng)typescript使用一個(gè)外部JavaScript庫(kù)時(shí),會(huì)需要這個(gè)文件，當(dāng)然好多的編譯器都用它來(lái)增加智能感知能力。
- 輸入指令：npm install -g typings
10、安裝 node 的 .d.ts 庫(kù)
- 輸入指令：typings install dt~node –global
11、創(chuàng)建ts_demo項(xiàng)目
- 創(chuàng)建ts_demo目錄
- 在命令行cmd下進(jìn)入ts_demo目錄
- cd ts_demo
- 輸入：npm init，創(chuàng)建package.json
12、創(chuàng)建 tsconfig.json
- (1)、啟動(dòng)VS Code
- (2)、選擇菜單 文件/打開文件夾，選擇剛剛創(chuàng)建的ts_demo文件夾
- (3)、雙擊tsconfig.json打開如下圖：
13、修改tsconfig.json
- 把tsconfig.json修改為：
- target：編譯之后生成的JavaScript文件需要遵循的標(biāo)準(zhǔn)。有三個(gè)候選項(xiàng)：es3、es5、es2015。
- noImplicitAny：為false時(shí)，如果編譯器無(wú)法根據(jù)變量的使用來(lái)判斷類型時(shí)，將用any類型代替。為true時(shí)，將進(jìn)行強(qiáng)類型檢查，無(wú)法推斷類型時(shí)，提示錯(cuò)誤。
- module：遵循的JavaScript模塊規(guī)范。主要的候選項(xiàng)有：commonjs、AMD和es6。
- removeComments：編譯生成的JavaScript文件是否移除注釋。
- sourceMap：編譯時(shí)是否生成對(duì)應(yīng)的source map文件。這個(gè)文件主要用于前端調(diào)試。當(dāng)前端js文件被壓縮引用后，出錯(cuò)時(shí)可借助同名的source map文件查找源文件中錯(cuò)誤位置。
- outDir：編譯輸出JavaScript文件存放的文件夾。
- include、exclude：編譯時(shí)需要包含/剔除的文件夾。
14、配置 TypeScript 編譯
- 按ctrl + shift + b編譯, 如果沒(méi)有配置過(guò)，task, 就會(huì)在上面提示(如圖)。
- 選擇【配置任務(wù)運(yùn)行程序】
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出錯(cuò)：
- "檢測(cè)到全局安裝的 tsc 編譯器(2.0.3)與 VS 代碼語(yǔ)言服務(wù)(1.8.10)版本不匹配。這可能導(dǎo)致不一致的編譯錯(cuò)誤。"
17、使用新版本TypeScript
在命令行(cmd)下輸入：npm install?typescript@2.0.3
-
選擇菜單 文件/首選項(xiàng)/工作區(qū)設(shè)置
-
settings.json文件修改為：
{ "typescript.tsdk": "node_modules/typescript/lib" }
18、修改啟動(dòng)源
- 按F5開始調(diào)試會(huì)生成： launch.json
- 用VS Code打開項(xiàng)目的launch.json文件，"program"條目，修改如下：
···
?"program": "${workspaceRoot}/greeter.js",
···
19、創(chuàng)建index.html
輸入：html:5，按tab鍵回自動(dòng)產(chǎn)生index.html文檔，然后修改如下：
20、瀏覽器打開index.html
轉(zhuǎn)載于:https://www.cnblogs.com/blair-chen/p/6567950.html
總結(jié)
以上是生活随笔為你收集整理的Visual Studio Code搭建TypeScript开发环境的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 学习使用git
- 下一篇： 注入技术--消息hook注入