TypeScript系列1-簡介及版本新特性

1. 簡介

    隨着PC端快速向移動端遷移，移動（體驗）優先的概念也愈來愈響。因爲ReactJS目前移動端僅僅支持iOS，所以移動端Web開發框架只能選擇: AngularJS/Angula2 + Ionic框架 + Cordova。想要學習好Angula2以及閱讀其代碼, 就必須瞭解和學習TypeScript，也所以須要學習好ES6以及Web Component。近期將開始學習TypeScript語言。

    下面先看看TypeScript語言的發展：

    鑑於JavaScript這種腳本語言很難應用於大規模Web應用的開發，微軟公司在2012年推出了新的開源編程語言——TypeScript。做爲Object Pascal和C#之父Anders Hejisberg的又一做品，TypeScript是JavaScript的超集，但徹底兼容JavaScript。相比於JavaScript，TypeScript增長了可選類型、類和模塊，擴展了原有的語法，使得代碼組織和複用變得更加有序，方便進行大型Web應用的開發。

    微軟是在2012.11月份將TypeScript語言開源，0.8.1版本是第二個開源的版本[1]。

    2014年4月，TypeScript 1.0版本正式發佈[2]。以後，微軟公司不斷更新該語言，陸續推出了1.三、1.4版本。

    2015年7月20日TypeScript1.5版本正式發佈[3]。 

    2015年9月2日TypeScript1.6 Beta版本發佈[6]。

2. TypeScript 1.5版本新特性

[4]雖然對TypeScript 1.5版本的新特性進行了翻譯，但其中一些關鍵字詞上含義誤差較遠，並且沒有給出舉例的代碼，下面內容主要是參考[3][4]從新整理的。

首先，在ES6（ECMAScript 6，即ECMAScript 2015）的支持方面。TypeScript 1.5版本增長了對ES6中Modules、Destructuring、Spread、for..of、Symbols、Computed Properties、Let/Const、和Tagged String Templates等新特性的支持。這些新特性使得TypeScript向成爲ES6的超集併爲ES6的全部主要特性提供類型檢查的目標邁進了一大步。

其次，在模塊（Module）方面，TypeScript 1.5也進行了很大改動。TypeScript 1.5支持ES6的新模塊語法——ES6模塊能夠用import導入模塊並用export導出每個公共API，甚至能夠只導入公共API所須要使用的那部分。

import * as Math from "my/math";
import { add, subtract } from "my/math";

並且，開發人員還可使用default export聲明表示模塊的核心內容，從而能夠對API作更精確控制。

// math.ts
export function add(x, y) { return x + y }
export function subtract(x, y) { return x – y }
export default function multiply(x, y) { return x * y }

// myFile.ts
import {add, subtract} from "math";
import times from "math";
var result = times(add(2, 3), subtract(5, 3));

在math.ts文件的最後一行用了'export default'，這一行可控制這是一個'default' export，當只是用名稱而不是用花括號({})來導入具體的exports時就導出這個缺省export，就像myFiles.ts文件的第二行。

此外，TypeScript 1.5對模塊進行了簡化，並換用更加簡潔的名稱——內部模塊改稱爲「namespace」，外部模塊才爲「module」。

因爲JavaScript既用於瀏覽器也用於服務器端，所以TypeScript已經支持將模塊編譯爲AMD或 CommonJS。爲了支持更多的JavaScript實踐，TypeScript 1.5新增長了兩個新的模塊輸出格式：SystemJS和UMD，其中SystemJS可使ES6 modules更接近於原生語義（native semantics）而不須要ES6兼容的瀏覽器引擎，UMD輸出單個模塊，從而可與AMD和 CommonJS一塊兒配合。

再次，在建立更輕量、可移植的項目方面。鑑於VS Code、Sublime、Atom和其餘編輯器已經開始支持tsconfig.json文件，TypeScript 1.5的編譯器也開始支持該類型文件，使得用戶能夠指定工程中的文件和編譯選項。該方法建立的項目既可在命令行也可在編輯器中進行開發，更加輕量化。

最後，TypeScript 1.5還添加了ES7中建議的Decorator特性的支持，該特性目前由Angular、Ember和Aurelia團隊在合做開發 。因爲目前ES7仍然處於開發階段，其Decorator特性也被視爲實驗性質。可是，用戶目前已經能夠進行體驗，感覺其強大之處。

下面是在Angular 2中使用decorators：

import {Component, View, NgFor, bootstrap} from "angular2/angular2";
import {loadFile} from "audioFile";
import {displayAudioFile} from "displayAudio";

@Component({selector: 'file-list'})
@View({
  template: `  
    <select id="fileSelect" size="5">    
      <option *ng-for="#item of items; #i = index"      
        [selected]="selected === item"(click)="updateSelection()">{{ item }}
      </option>  
    </select>`,  
  directives: [NgFor]
})

class MyDisplay {  
  items: string[];
  
  constructor() {    
    this.items = ["item1", "item2"];  
  }  
  updateSelection() { … }
}

Decorators能夠將元數據（metadata）關聯到類以及類成員上，並更新那些被裝飾的功能。上面代碼中，Angular 2使用Decorators來定義類中的HTML selector和template。

3. TypeScript 1.6 Beta版本新特性

React中採用JSX語法編寫DOM和native component，但JSX語法與TypeScript中的映射（cast）語法衝突。

爲了支持React/JSX, TypeScript從1.6版本開始引入一個新的.tsx文件後綴，使能TypeScript文件中的JSX，同時採用新的'as'運算符做爲映射的缺省方式[6]。

同時，對象檢查規則更加嚴格，例如

var x: { foo: number };
x = { foo: 1, baz: 2 };  // 錯誤，多了一個property 'baz', 但在1.6版本以前沒法檢測出

var y: { foo: number, bar?: number };
y = { foo: 1, baz: 2 };  // 錯誤, 多了一個或拼寫錯誤property 'baz', 但在1.6版本以前沒法檢測出

另外，提高模塊解析，使解析更爲天然。還增長支持ES6中類表達式（class expressions），開始支持generators。

4. 參考資料

[1] Announcing TypeScript 0.8.1, 15 Nov 2012, http://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx

[2] Announcing TypeScript 1.0, 2 Apr 2014, http://blogs.msdn.com/b/typescript/archive/2014/04/02/announcing-typescript-1-0.aspx

[3] Announcing TypeScript 1.5, 20 Jul 2015, http://blogs.msdn.com/b/typescript/archive/2015/07/20/announcing-typescript-1-5.aspx

[4] TypeScript 1.5正式發佈：深度支持ECMAScript, 2015年7月26日, http://www.infoq.com/cn/news/2015/07/TypeScript-ECMAScript

[5] TypeScript的崛起, 2015年4月13日, http://www.infoq.com/cn/news/2015/04/TypeScript-rise

    英文The Rise of TypeScript? March 30, 2015, http://developer.telerik.com/featured/the-rise-of-typescript/

[6] Announcing TypeScript 1.6 Beta: React/JSX, better error checking, and more, 2 Sep 2015, http://blogs.msdn.com/b/typescript/archive/2015/09/02/announcing-typescript-1-6-beta-react-jsx-better-error-checking-and-more.aspx