簡易介紹TypeScript

如果大家對c#愛不釋手的話… 那TypeScript 就會立刻上手，因為TypeScript之父正是C# 的創始人，所以物件導向的類別、繼承、封裝、實作、介面…等更具有親和力的寫法，而且許多火紅的JavaScript (angular2, node.js, react.js ) 框架也都擁抱TypeScript ，所以我們好好瞭解TypeScript的奧妙吧!

一、介面

interface Person {   firstname: string;   lastname: string; } function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname; } var user = {firstname: "Jane",lastname:"test"}; //如果不按照介面實作firstname、lastname 會失敗 document.body.innerHTML = greeter(user);

TypeScript 允許靜態檢查型別，所以輸入的物件中缺少了某些屬性，會自動出現錯提示，如果想允許某些屬性是非強制性輸入值，可加上? 就不用強制檢查屬性了

interface Person {

   firstname: string;

   lastname ?: string;

}

var user = {

   firstname: "Jane"

};

二、繼承

class Animal { name:string; constructor(theName: string) { this.name = theName; } move(meters: number = 0) { alert(this.name + " moved " + meters + "m."); } } class Snake extends Animal { constructor(name: string) { super(name); } move(meters = 5) { alert("Slithering..."); super.move(meters); } } class Horse extends Animal { constructor(name: string) { super(name); } move(meters = 45) { alert("Galloping..."); super.move(meters); } } var sam = new Snake("Sammy the Python"); var tom: Animal = new Horse("Tommy the Palomino");                                                              sam.move(); tom.move(34);

就如同物件導件的語法，透過繼承也擁有父類的特性，可以不斷的擴充新的類別，覆寫原父類別的方法，具有彈性的寫法，令人非常喜愛，當然有具有封裝屬性的功能(Public、private) ，如果有同樣繼承相同的父類別，還能互相給值例如: sam = tom , 但是如果繼承的類別有新增屬性，就會無法相互指派值。

三、泛型

如同c#的語法<T>，允許傳入各種不同的物件型別，不用一開始決定什麼類別, 有別早期的宣告any, 雖然也允許傳入任何的型別的值，但卻失去型別檢查的意義，但有了泛型仍保有原先傳入的型別，仍具有靜態檢查的優勢。

class Greeter<T> {   greeting: T;   constructor(message: T) {     this.greeting = message;   }   greet() {     return this.greeting;   } } let greeter = new Greeter<string>("Hello, world"); let button = document.createElement('button'); button.textContent = "Say Hello"; button.onclick = function() {     alert(greeter.greet()); } document.body.appendChild(button);

以上是簡單介紹TypeScript的優點，但缺點就是需要編譯後才能執行javaScript，不過目前已有不少工具直接支援自動編譯，目前visual studio 2015、visual Studio Code 已完全內建TypeScript