[譯] TypeScript入門指南（JavaScript的超集)

你是否聽過 TypeScript？

TypeScript 是 JavaScript 的超集，TypeScript結合了類型檢查和靜態分析，顯式接口。TypeScript是微軟的開源項目，它是由C#之父Anders Hejlsberg發起的。

 

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

語言特性

• 類
• 接口
• 模塊
• 類型註解
• 編譯時類型檢查
• 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 編輯器中，還提供了重構（Refactor)和 轉到定義(Go To Definition)等功能。

 

Note: TypeScipt不依賴任何 IDE,你能夠在任何應用中將 TypeScript 編譯成 JavaScript。

如何獲取

你能夠經過如下兩個方法來安裝 TypeScript：

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

Note: 請關閉其餘應用程序來避免安裝時的一些問題。

下面是經過 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 上安裝了插件，你會看到以下模板：

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 文件中有以下內容將會被自動編譯：

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

你也能夠在線Try一下：Playground 

 

更多閱讀資料    

 

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

 

總結  

這篇文章中咱們簡單的介紹瞭如何使用 TypeScript，但願你能喜歡或者以爲對你有幫助。

英文原文