一、什么是 TypeScript

　　TypeScript 是近幾年被火爆的應(yīng)用了，這讓大家產(chǎn)生了一個(gè)錯(cuò)覺(jué)：這么多的擁護(hù)者，難道TypeScript是一個(gè)新的語(yǔ)言?

　　TypeScript是微軟公司開(kāi)發(fā)和維護(hù)的一種面向?qū)ο蟮木幊陶Z(yǔ)言。它是JavaScript的超集，包含其所有元素。

　　TypeScript完全遵循OOPS的概念，在TSC(TypeScript編譯器)的幫助下，我們可以將TypeScript代碼(.ts文件)轉(zhuǎn)換成JavaScript(.js文件)

　　TypeScript是JavaScript的超集

　　二、TypeScript 簡(jiǎn)史

　　2010年，Anders Hejlsberg(TypeScript的創(chuàng)建者)開(kāi)始在微軟開(kāi)發(fā)TypeScript，并于2012年向公眾發(fā)布了TypeScript的第一個(gè)版本(TypeScript 0.8)。盡管TypeScript的發(fā)布受到了全世界許多人的稱贊，但是由于缺少主要ide的支持，它并沒(méi)有被JavaScript社區(qū)主要采用。

　　TypeScript的第一個(gè)版本(TypeScript 0.8)于2012年10月發(fā)布。

　　最新版本的Typescript(Typescript 3.0)于2018年7月發(fā)布，您可以在這里下載最新版本!

　　三、為什么我們要使用TypeScript?

　　· TypeScript簡(jiǎn)化了JavaScript代碼，使其更易于閱讀和調(diào)試。

　　· TypeScript是開(kāi)源的。

　　· TypeScript為JavaScript ide和實(shí)踐(如靜態(tài)檢查)提供了高效的開(kāi)發(fā)工具。

　　· TypeScript使代碼更易于閱讀和理解。

　　· 使用TypeScript，我們可以大大改進(jìn)普通的JavaScript。

　　· TypeScript為我們提供了ES6(ECMAScript 6)的所有優(yōu)點(diǎn)，以及更高的生產(chǎn)率。

　　· TypeScript通過(guò)對(duì)代碼進(jìn)行類型檢查，可以幫助我們避免在編寫(xiě)JavaScript時(shí)經(jīng)常遇到的令人痛苦的錯(cuò)誤。

　　· 強(qiáng)大的類型系統(tǒng)，包括泛型。

　　· TypeScript只不過(guò)是帶有一些附加功能的JavaScript。

　　· TypeScript代碼可以按照ES5和ES6標(biāo)準(zhǔn)編譯，以支持最新的瀏覽器。

　　· 與ECMAScript對(duì)齊以實(shí)現(xiàn)兼容性。

　　· 以JavaScript開(kāi)始和結(jié)束。

　　· 支持靜態(tài)類型。

　　· TypeScript將節(jié)省開(kāi)發(fā)人員的時(shí)間。

　　· TypeScript是ES3、ES5和ES6的超集。

　　TypeScript的附加功能

　　· 具有可選參數(shù)的函數(shù)。

　　· 使用REST參數(shù)的函數(shù)。

　　· 泛型支持。

　　· 模塊支持。

　　四、大?，F(xiàn)身說(shuō)法:

　　· “我們喜歡TypeScript有很多方面……有了TypeScript，我們的幾個(gè)團(tuán)隊(duì)成員說(shuō)了類似的話，我現(xiàn)在實(shí)際上已經(jīng)理解了我們自己的大部分代碼!因?yàn)樗麄兛梢暂p松地遍歷它并更好地理解關(guān)系。我們已經(jīng)通過(guò)TypeScript的檢查發(fā)現(xiàn)了幾個(gè)漏洞。“-Brad Green，Angular工程總監(jiān)“

　　· Ionic的主要目標(biāo)之一是使應(yīng)用程序開(kāi)發(fā)盡可能快速和簡(jiǎn)單，工具支持TypeScript為我們 提供了自動(dòng)完成、類型檢查和源文檔與之真正一致。”-Tim Lancina，工具開(kāi)發(fā)人員–Ionic“

　　· 在編寫(xiě)基于web或JavaScript的現(xiàn)代應(yīng)用程序時(shí)，TypeScript是一個(gè)明智的選擇。TypeScript經(jīng)過(guò)仔細(xì)考慮的語(yǔ)言特性和功能，以及它不斷改進(jìn)的工具，帶來(lái)了非常有成效的開(kāi)發(fā)體驗(yàn)。”-Epic研究員Aaron Cornelius“

　　· TypeScript幫助我們重用團(tuán)隊(duì)的知識(shí)并通過(guò)提供與C#相同的優(yōu)秀開(kāi)發(fā)經(jīng)驗(yàn)來(lái)保持相同的團(tuán)隊(duì)速度……比普通JavaScript有了巨大的改進(jìn)。”-Valio Stoychev，PM Lead–NativeScript“

　　五、你可能不知道的TypeScript頂級(jí)功能

　　1、面向?qū)ο蟪绦蛟O(shè)計(jì)

　　TypeScript包含一組非常好的面向?qū)ο缶幊?OOP)特性，這些特性有助于維護(hù)健壯和干凈的代碼;這提高了代碼質(zhì)量和可維護(hù)性。這些OOP特性使TypeScript代碼非常整潔和有組織性。

　　例如:

　　class CustomerModel {

　　customerId: number;

　　companyName: string;

　　contactName: string;

　　country: string;

　　}

　　class CustomerOperation{

　　addCustomer(customerData: CustomerModel) : number {

　　// 添加用戶

　　let customerId = 5;// 保存后返回的ID

　　return customerId;

　　}

　　}

　　2、接口、泛型、繼承和方法訪問(wèn)修飾符

　　TypeScript支持接口、泛型、繼承和方法訪問(wèn)修飾符。接口是指定契約的好方法。泛型有助于提供編譯時(shí)檢查，繼承使新對(duì)象具有現(xiàn)有對(duì)象的屬性，訪問(wèn)修飾符控制類成員的可訪問(wèn)性。TypeScript有兩個(gè)訪問(wèn)修飾符-public和private。默認(rèn)情況下，成員是公共的，但您可以顯式地向其添加公共或私有修飾符。

　　(1)接口

　　interface ITax {

　　taxpayerId: string;

　　calculateTax(): number;

　　}

　　class IncomeTax implements ITax {

　　taxpayerId: string;

　　calculateTax(): number {

　　return 10000;

　　}

　　}

　　class ServiceTax implements ITax {

　　taxpayerId: string;

　　calculateTax(): number {

　　return 2000;

　　}

　　}

　　(2)訪問(wèn)修飾符

　　class Customers{

　　public companyname:string;

　　private country:string;

　　}

　　顯示一個(gè)公共變量和一個(gè)私有變量

　　(3)繼承

　　class Employee{

　　Firstname:string;

　　}

　　class Company extends Employee {

　　Department:string;

　　Role:string

　　private AddEmployee(){

　　this.Department="myDept";

　　this.Role="Manager";

　　this.FirstName="Test";

　　}

　　}

　　(4)泛型

　　function identity(arg: T): T {

　　return arg;

　　}

　　// 顯示泛型實(shí)現(xiàn)的示例

　　let output = identity("myString");

　　let outputl = identity(23);

　　(5)強(qiáng)/靜態(tài)類型

　　TypeScript不允許將值與不同的數(shù)據(jù)類型混合。如果違反了這些限制，就會(huì)拋出錯(cuò)誤。因此，在聲明變量時(shí)必須定義類型，并且除了在JavaScript中非?？赡芏x的類型之外，不能分配其他值。

　　例如:

　　let testnumber: number = 6;

　　testnumber = "myNumber"; // 這將引發(fā)錯(cuò)誤

　　testnumber = 5; // 這樣就可以了

　　3、編譯時(shí)/靜態(tài)類型檢查

　　如果我們不遵循任何編程語(yǔ)言的正確語(yǔ)法和語(yǔ)義，那么編譯器就會(huì)拋出編譯時(shí)錯(cuò)誤。在刪除所有語(yǔ)法錯(cuò)誤或調(diào)試編譯時(shí)錯(cuò)誤之前，它們不會(huì)讓程序執(zhí)行一行代碼。TypeScript也是如此。

　　例如:

　　let isDone: boolean = false;

　　isDone = "345"; // 這將引發(fā)錯(cuò)誤

　　isDone = true; // 這樣就可以了

　　4、比JavaScript代碼更少

　　TypeScript是JavaScript的包裝器，因此可以使用幫助類來(lái)減少代碼。Typescript中的代碼更容易理解。

　　5、可讀性

　　接口、類等為代碼提供可讀性。由于代碼是用類和接口編寫(xiě)的，因此更有意義，也更易于閱讀和理解。

　　舉例:

　　class Greeter {

　　private greeting: string;

　　constructor (private message: string) {

　　this.greeting = message;

　　}

　　greet() {

　　return "Hello, " + this.greeting;

　　}

　　}

　　JavaScript 代碼:

　　var Greeter = (function () {

　　function Greeter(message) {

　　this.greeting = message;

　　}

　　Greeter.prototype.greet = function () {

　　return "Hello, " + this.greeting;

　　};

　　return Greeter;

　　})();

　　6、兼容性

　　Typescript與JavaScript庫(kù)兼容，比如 underscore.js，Lodash等。它們有許多內(nèi)置且易于使用的功能，使開(kāi)發(fā)更快。

　　7、提供可以將代碼轉(zhuǎn)換為JavaScript等效代碼的“編譯器”

　　TypeScript代碼由純JavaScript代碼以及特定于TypeScript的某些關(guān)鍵字和構(gòu)造組成。但是，編譯TypeScript代碼時(shí)，它會(huì)轉(zhuǎn)換為普通的JavaScript。這意味著生成的JavaScript可以與任何支持JavaScript的瀏覽器一起使用。

　　8、支持模塊

　　隨著TypeScript代碼基的增長(zhǎng)，組織類和接口以獲得更好的可維護(hù)性變得非常重要。TypeScript模塊允許您這樣做。模塊是代碼的容器，可以幫助您以整潔的方式組織代碼。從概念上講，您可能會(huì)發(fā)現(xiàn)它們類似于.NET命名空間。

　　例如:

　　module Company {

　　class Employee {

　　}

　　class EmployeeHelper {

　　targetEmployee: Employee;

　　}

　　export class Customer {

　　}

　　}

　　var obj = new Company.Customer();

　　9、ES6 功能支持

　　Typescript是ES6的一個(gè)超集，所以ES6的所有特性它都有。另外還有一些特性，比如它支持通常稱為lambda函數(shù)的箭頭函數(shù)。ES6引入了一種稍微不同的語(yǔ)法來(lái)定義匿名函數(shù)，稱為胖箭頭(fat arrow)語(yǔ)法。

　　舉例:

　　setTimeout(() => {

　　console.log("setTimeout called!")

　　}, 1000);

　　10、在流行的框架中使用

　　TypeScript在過(guò)去幾年里越來(lái)越流行。也許TypeScript流行的決定性時(shí)刻是Angular2正式轉(zhuǎn)換到TS的時(shí)候，這是一個(gè)雙贏的局面。

　　11、減少錯(cuò)誤

　　它減少了諸如空處理、未定義等錯(cuò)誤。強(qiáng)類型特性，通過(guò)適當(dāng)?shù)念愋蜋z查限制開(kāi)發(fā)人員，來(lái)編寫(xiě)特定類型的代碼。

　　12、函數(shù)重載

　　TypeScript允許您定義重載函數(shù)。這樣，您可以根據(jù)參數(shù)調(diào)用函數(shù)的不同實(shí)現(xiàn)。但是，請(qǐng)記住，TypeScript函數(shù)重載有點(diǎn)奇怪，需要在實(shí)現(xiàn)期間進(jìn)行類型檢查。這種限制是由于TypeScript代碼最終被編譯成純JavaScript，而JavaScript不支持真正意義上的函數(shù)重載概念。

　　例如:

　　class functionOverloading{

　　addCustomer(custId: number);

　　addCustomer(company: string);

　　addCustomer(value: any) {

　　if (value && typeof value == "number") {

　　alert("First overload - " + value);

　　}

　　if (value && typeof value == "string") {

　　alert("Second overload - " + value);

　　}

　　}

　　}

　　13、構(gòu)造器

　　在TypeScript中定義的類可以有構(gòu)造函數(shù)。構(gòu)造函數(shù)通常通過(guò)將默認(rèn)值設(shè)置為其屬性來(lái)完成初始化對(duì)象的工作。構(gòu)造函數(shù)也可以像函數(shù)一樣重載。

　　例如:

　　export class SampleClass{

　　private title: string;

　　constructor(public constructorexample: string){

　　this.title = constructorexample;

　　}

　　}

　　14、調(diào)試

　　用TypeScript編寫(xiě)的代碼很容易調(diào)試。

　　15、TypeScript只是JavaScript

　　TypeScript始于JavaScript，止于JavaScript。Typescript采用JavaScript中程序的基本構(gòu)建塊。為了執(zhí)行的目的，所有類型腳本代碼都轉(zhuǎn)換為其JavaScript等效代碼。

　　例如:

　　class Greeter {

　　greeting: string;

　　constructor (message: string) {

　　this.greeting = message;

　　}

　　greet() {

　　return "Hello, " + this.greeting;

　　}

　　}

　　JavaScript 代碼:

　　var Greeter = (function () {

　　function Greeter(message) {

　　this.greeting = message;

　　}

　　Greeter.prototype.greet = function () {

　　return "Hello, " + this.greeting;

　　};

　　return Greeter;

　　})();

　　16、可移植性

　　TypeScript可以跨瀏覽器、設(shè)備和操作系統(tǒng)移植。它可以在JavaScript運(yùn)行的任何環(huán)境中運(yùn)行。與對(duì)應(yīng)的腳本不同，TypeScript不需要專用的VM或特定的運(yùn)行時(shí)環(huán)境來(lái)執(zhí)行。