TypeScript入門 {學習筆記}

Giant
Giant
Apr 20, 2018 · 6 min read

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

Chapter

TypeScript介紹

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

TypeScript核心

  • 環境建置
  • 基礎觀念

練習一下

  • 參考及推薦網站

TypeScript介紹

> 什麼是TypeScript

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

Image for post
Image for post

> 為何需要學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

TKD_giant

前端小菜菜邁向前端偉大的航道

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store