TypeScript入門指南

原文轉自：http://www.oschina.net/question/12_72250

 

TypeScript 是微軟開發的 JavaScript 的超集，TypeScript兼容JavaScript，能夠載入JavaScript代碼而後運行。TypeScript與JavaScript相比進步的地方 包括：加入註釋，讓編譯器理解所支持的對象和函數，編譯器會移除註釋，不會增長開銷；增長一個完整的類結構，使之更新是傳統的面嚮對象語言。

爲何會有 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 易學易於理解

語法特性

• 類 Classes
• 接口 Interfaces
• 模塊 Modules 
• 類型註解 Type annotations
• 編譯時類型檢查 Compile time type checking 
• Arrow 函數 (相似 C# 的 Lambda 表達式)

JavaScript 的 TypeScript 的區別

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

編輯器支持

Visual Studio 2012 支持 TypeScript 模塊/語法高亮，這個須要安裝 TypeScript 插件。而相似    Sublime Text, Vim and Emacs 編輯器支持語法高亮。 在 VS 2012 編輯器中，還提供了重構和 Go To Definition 等功能。  

 

注意: TypeScript 不依賴任何 IDE，你可在任何應用中自行將 TypeScript 編譯成 JavaScript。

如何獲取

可經過如下兩個方法來安裝 TypeScript：

• 經過 Node.js 包管理器 (npm) 
• 經過與 Visual Studio 2012 繼承的 MSI. (Click here to download) 

注意: 須要關閉其餘應用程序來避免安裝時的一些問題。

下面是經過 MSI 文件安裝時的界面：

若是你只是想先看看 TypeScript 而已，可 click here.  

如何編譯 TypeScript   

要在應用中使用 TypeScript 必須先編譯，編譯的結果是生成 js 文件，你可經過 TypeScript 編譯器 tsc 來完成這個過程。

若是你在 Visual Studio 2012 中使用 TypeScript，它會自動將 ts 文件編譯成 js 文件。

TypeScript 編譯器模板被安裝在以下路徑：

 

C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0

或者是：

 

C:\Program Files\Microsoft SDKs\TypeScript\0.8.0.0

 

要編譯 TypeScript 文件，可以使用以下命令：

tsc filename.ts

 

一旦編譯成功，就會在相同目錄下生成一個同名 js 文件，你也能夠經過命令參數來修改默認的輸出名稱。

若是你但願 TypeScript 被自動編譯，你能夠了解下 Sholo.TypeScript.Build , Web Essentials 2012.  

TypeScript 項目/文件 模板

一旦你在 Visual Studio 2012 上安裝了插件，你會得到以下模板：

HTML Application with TypeScript   

MVC – TypeScript Internet Application

TypeScript File   

首個用 TypeScript 編寫的 HTML 應用

如今我開始用 TypeScript 建立一個簡單的 HTML 應用。

首先經過 File -> New-Project 新建項目：

輸入必要信息，點擊 Ok 按鈕，建立後項目模板以下：

咱們將看到 app.js 依賴於 app.ts，默認的 app.ts 文件包含類和構造函數等等，以下圖：

TypeScript 文件將會被編譯爲 JavaScript (app.js)，下面是編譯後的 JavaScript 代碼：

而後咱們能夠在頁面中引用 JavaScript

當你構建或者從新構建項目時，你將看到提示是否從新編譯 TypeScript 的信息：

若是在 .??proj 文件中有以下內容將會被自動編譯：

當你運行此應用時會在頁面上顯示當前的日期和時間

你也能夠在線玩玩：Playground 

更多閱讀資料   

 

• TypeScript 微軟官方網站 http://www.typescriptlang.org/ 
• TypeScript 在線玩- http://www.typescriptlang.org/Playground/ 
• TypeScript 源碼 typescript.codeplex.com  
• Anders Hejlsberg: Introducing TypeScript