TypeScript入門 {學習筆記}

繼上一篇 JavaScript入門，今天來做TypeScript的筆記，但是我主要只會紀錄TS的特色以及跟JS有差異的地方及用法。

Chapter

TypeScript介紹

• 什麼是TypeScript
• 為何需要學TypeScript

TypeScript核心

• 環境建置
• 基礎觀念

練習一下

• 參考及推薦網站

TypeScript介紹

> 什麼是TypeScript

簡單的說，就是在JavaScript上面加上type，T可以說是JavaScript的進階版，也是為了讓JavaScript可以寫大型應用程式的商業邏輯所設計，使JavaScript不再只是控制DOM而已，而是真的可以寫複雜商業邏輯。

> 為何需要學TypeScript

隨著ECMAScript的改版，我們在寫JS時都要注意瀏覽器是否支援了JavaScript某個keyword與function，但透過TypeScript編譯技術將最新版本的規格編譯成ES5，解決瀏覽器不支援問題。
TypeScript包含了開發大型應用程式所需要的必要元素，有了強型別 + 編譯保護，透過編譯器檢查，讓我們可以少寫很多測試，專注在為商業邏輯的需求寫測試。此外TypeScript是Angular欽定的開發語言，所以如果想學Angular一定要先學TypeScript。

TypeScript核心

> 環境建置

安裝軟體:

所需要的安裝軟體與前一篇入門 JavaScript入門 所介紹的軟體一樣。

編譯環境:

• 建立package.json
  npm init
• 安裝typescript
  npm install typescript --save
• 建立tsconfig.json
  tsc init
• 建立一個HTML與TS檔
• 編譯
  "tsc "packageName"
• HTML引入編譯後的JS檔

> 基礎觀念

1. 強型別
2. Typeof
3. Function
4. For…of
5. Class
6. Property
7. Constructor
8. Inheritance
9. Interface

1. 強型別

TS具有強型別的特性，比較著名的強型別語言有像是C#、Java等，它們對於變數的定義檢查比較嚴謹，如果沒有依照指定的型別傳入參數，在編譯時期就會有Error。

2. Typeof

• Boolean

let Boo: boolean = true;

• Number

let Num: number = 0;

• String

let Str: 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;

3. Function

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

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

設定傳入參數的預設值(ES6開始支援預設值寫法)。

class CouponDiscounter {
  Calculate(price: number, coupon: string = ''): number {
    if(coupon){
      //// 使用折價券
    }
    else{
      //// 不使用折價券
    }
  }
}
var discounter = new CouponDiscounter();
discounter.Calculate(100,'coupon');
discounter.Calculate(100);

4. 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'
}

5. Class

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

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

6. Property

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

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

7. Constructor

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

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

8. 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();

9. Interface

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

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

練習一下

# 題目
建立一個 購物車 應用程式，必須要能夠根據會員的等級，提供不同的折扣方式。
嘗試使用物件導向的方式撰寫以上的程式碼，並根據會員等級回傳不同計算邏輯的 Class。
1. 如果是 VIP 會員，只要購物滿 500 元，就一律有 8 折優惠。
2. 如果是一般會員，除了購物必須要滿 1000 元，
   而且購買超過 3 件商品才能擁有 85 折優惠。

ANS: Cart