為甚麼要學習 Typescipt

為甚麼要學習 Typescipt，或是說 為什麼要用Typescipt 呢，Typescipt 又有什麼樣的優點跟有什麼基本語法呢？

Typescript 對 Javascript 主要是多了靜態類型檢查

而靜態類型檢查有什麼好處?

最主要是因為 "靜態類型更有利於構建大型應用"。為什麼靜態類型有利於構建大型應用？主要有兩點。

靜態型別檢查可以做到早期型別檢查

即你編寫的代碼甚至沒有被執行到，一旦你在 coding 時發生型別不一致時，語言在編譯階段甚至在運行就可以被發現。針對大型應用，因為 Javascript 測試相對困難，很多程式並不一定能夠在所有條件下執行到，因此也很難知道當下執行的型別，容易造成執行時期錯誤。

靜態型別有對於增加程式碼可讀性，

像是 jQuery API Documentation 中的 jQuery.ajax，在 documentation 中，有詳盡地解釋了每一個參數詳細的型別．
如果沒有 documentation，我們只看這個函式的宣告方式外，根本不可能把這個用法用對。 大型網站方法更是許多，呼叫方式相當複雜，不可能每個函數都有人編寫文件，所以靜態型別就非常重要．它提供了基本的參數約束．
假如你的代碼像的jQuery這樣所有函數基本全是API，根本沒什麼內部函數，而且邏輯關係看起來顯而易見，這確實跟大型應用搭不上關係，那麼靜態類型對閱讀程式確實沒什麼幫助

Typescript的缺點

假設你一開始寫 Typescript 而不是學 Javascirpt 的話，有些 Js 舊有的特性你可能會不知道，
有些第三方的JS庫缺失D定義檔(xx.d.ts)或者更新不即時。會導致不能便利的使用它或者呼叫了過時的方法或是函式
而且還強制你寫一堆繁瑣的介面型別。而且有些js的方式它還不相容，甚至還 閹割了JS的一些技法。這是我目前使用上遇到的一些主要問題．

Typescript 基礎觀念

1. Typeof()
2. Function()
3. For…of()
4. Class()
5. Property()
6. Constructor()
7. Inheritance()
8. Interface()

1. Typeof()

• Boolean

let havaMoney: boolean = true;

• Number

let persons: number = 0;

• String

let name: string = "TS";

• Array
  宣告一個any型態的陣列

let Arr: any[] = [];
or
let Arr: Array<any> = [];

• Enum

enum Num {
    One = 0,
    Two = 1,
    Three = 2    
}
//// 使用 Enum 判斷類型
if(num === Num.One){
    //// 程式碼
}
//// Enum 不存在，跳出錯誤
if(num === Num.Two) {
    //// 程式碼
}
//// 程式碼不容易閱讀
if(num === Num.Three) {
    //// 程式碼
}

• Any

var data: any;

2. Function(函式)

與JavaScript差別的地方是可以對函式定義傳入與回傳的型別，來避免傳錯不正確的型別參數。

                          傳入型別        回傳型別
function getDiscountPrice(price: number): number {  
  if (price > 200) {    
    return price * 0.8  
  }  
  
  return price;
}

3. For...of()

/// JS
var Num = ['one', 'two', 'three'];
for(var NumKey in Num) {  
  console.log(NumKey);    //// 輸出 0, 1, 2
}
/// TS
var people = ['one', 'two', 'three'];
for(var NumKey of Num) {  
  console.log(NumKey);    //// 輸出 'one', 'two', 'three'
}

4. Class

具有建構式、屬性的特性。

class Home {
  name: string;
  constructor(name: string){
    this.name = name;
  }
  getAdress(): string {
    //程式邏輯
  }
}

5. Property

物件導向中，會使用Property來表示一個Class所擁有的資料。

/// property 預設都是 public， 不希望被外部存取的話
///，必須要自己加上private關鍵字
class Home {  
  name: string;    
  phone: number;    
  private  adress: string;
}

6. Constructor

在初始化Class時，同時替Class指派一些初始值。

class Home {  
  name: string;    
  phone: number;    
  
  constructor(private  adress: string;){
      this.name = "Giant";
      this.phone = 123456;
  }
}

7. Inheritance

根據需求撰寫子類別，並且可以複寫父類別的程式碼。

class Animal {
  Say(){
    console.log('I\'m Animal')
  }
}
class Dog extends Animal {
  Say(){
    super.Say();
    console.log('I\'m Dog');
  }
}
var dog = new Dog();
dog.Say();

8.Interface

class如承接了Interface，就必須遵循且實作所定義的Property或Function，實做類別的關鍵字是implements。

interface Home {
    name: string;
    phone: number;
}
function homeInfo(home: Home) {
    alert("name: " + home.name + " phone: " + home.phone);
}

Typescript 學習資源

網路上有很多有關於 Typescript的學習資源，除了官網的 Typescipt 介紹外，還有保哥的 Typescipt教學 以及，對外翻譯的 Typescript都是非常好的學習資源

參考

1. 为什么要使用TypeScript？有哪些情景请简单介绍一下，或者来个例子?

2. jQuery.ajax()

3. TypeScript入門 {學習筆記}