2017年2月13日 星期一

簡易介紹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"}; //如果不按照介面實作firstnamelastname 會失敗

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);

就如同物件導件的語法,透過繼承也擁有父類的特性,可以不斷的擴充新的類別,覆寫原父類別的方法,具有彈性的寫法,令人非常喜愛,當然有具有封裝屬性的功能(Publicprivate) ,如果有同樣繼承相同的父類別,還能互相給值例如: 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 2015visual Studio Code 已完全內建TypeScript


沒有留言:

張貼留言