iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
1
Modern Web

Angular 8 從推坑到放棄系列 第 8

[Day 07] 基礎 Typescript

  • 分享至 

  • xImage
  •  

為甚麼要學習 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入門 {學習筆記}


上一篇
[Day 06 ]Angular 資料繫結
下一篇
[Day 08]可能是最簡單的 Zone.js 教學
系列文
Angular 8 從推坑到放棄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言