Typescript 基礎教學 能不會卻不能不知道

TypeScript 是為了解決什麼問題而誕生的？

這問題真的很實際，一直在寫程式接觸Javascript，剛開始看到TypeScript就覺很不方便，我的工作內容其實比較多是在寫版面切版UI等等，資料處理API都比較少，用TypeScript對我很吃力不討好，但是因為 JavaScript 類型的使用與轉換，常常都是程式碼中潛在的問題，例如開發者經常會因為指定值的類型錯誤，造成不可預期的結果，或是有些函式庫在使用時，如果沒有仔細觀看文件，甚至或是文件寫得不清不楚，也容易造成資料類型誤用的情況。

TypeScript 加入靜態資料類型在原本的 JavaScript 後，代表可以讓變數或資料定義時，就可以指定必需使用哪一種資料類型，之後在使用時如果發生資料類型不相符時，就會發出預先的警告，這對於開發具有一定規模化的 JavaScript 應用程式時，更具有強健性相當有幫助。

Typescript屬於強型別語言
Javascript屬於弱型別語言

參考 : https://eddychang.me/typescript-quick-start-in-10-mins

環境安裝 & 第一次的編譯體驗

npm install -g typescript

安裝成功後，你可以在命令列中輸入tsc，應該會看到目前的TypeScript編譯器的版本和各種資訊，像下面這樣：

TS 跟 JS有甚麼布一樣 寫一個範例

創一個oo.ts 檔案在裡面輸入

function foo(name : string) {
    return 'Hello ' + name
  };
foo(123);

儲存然後打

tsc oo.ts

會發現報錯了 Argument of type ‘number’ is not assignable to parameter of type ‘string’.
他說你的數值是number 但type 必須為string，這就是強型別的規定

TS的寫法

比較嚴謹的寫法應該要像以下

function foo(name : string) : string {
  return 'Hello ' + name
}
 
foo('123')

如果變數可能有數字跟字串應該要這樣寫

function foo(name : string | number = 'Eddy') : string {
  if(typeof name === 'number') 
    return 'Hello Somebody'
 
  return 'Hello ' + name
}
 
foo('Bob')  // Hello Bob
foo(123)  // Hello Somebody
foo()  //Hello Eddy

介面(Interface)

對於物件中屬性的類型定義，顯得更複雜得多了，這是學習的重點中的重點，在這上面的學問相當的多，細節也很多。TypeScript 使用了介面來描述物件的外形(Shape)樣子，以下面的範例程式碼來說明：

interface User {
  name : string
  id : number
  username?: string
}
 
const user1 : User = {
  name: "Eddy",
  id: 0
}
 
const user2 : User = {
  name: "Jobs",
  username: "jobs123",
  id: 0
}

要注意的是interface的宣告是一行一個屬性定義，後面並沒有逗號(,)，而是要加分號(;)或不加都可以，這只是撰寫風格的差異而已(要不要用分號作語句結尾)。像下面這樣的程式碼範例：

上面可以看到username?這個屬性後面加了一個符號問號(?)，代表它是可選的(optional)，也就是”可有可無的”的意思。

介面與物件的內容比你想像也多很多，它們有很多與其它像類型、函式間的交互應用，可以參考官網文件。

類別

ES6開始讓 JavaScript有了類別(class)的定義方式，但內容非常的陽春，之後的一直到ES這幾年的標準中，加入了不少新的有關於類別的新特性內容。

TypeScript 對於ES中的新特性都可以支援得很好，也有自己擴充的有關於類型定義的特性，簡單來說它讓類別整個的定義更為完整，例如用於定義成員的public、private與protected修飾字等等，以及像是static(靜態)屬性或abstract(抽象)類別等等。一個簡單的類別範例，像下面這樣的範例程式碼：

class User {
  private name : string
 
  constructor(name : string) {
    this.name = name
  }
 
  greet() {
    console.log(`Hello, ${this.name}!`)
  }
}
 
const eddy = new User("Eddy")
eddy.name // Error: 'name' is private
eddy.greet()

新的ES2019 (ES10)中加入了Private fields(私有欄位)，長得就不太像上面那樣，而是像下面的範例程式碼，TypeScript也是支援的：

class User {
  #name : string
  constructor(name : string) {
    this.#name = name;
  }
  greet() {
    console.log(`Hello, ${this.#name}!`);
  }
}
const eddy = new User("Eddy")
eddy.name // Error: 'name' is private
eddy.greet()

上面兩個範例的差異在於，TypeScript 可以編譯第一個程式碼，也就是自己的private為ES5標準的JavaScript，但第二個則是只能編譯為ES2015後的版本，所以還是有些差異的部份，太新的ES標準真要在編譯為ES5標準的JavaScript時，或許babel才是一個正確的選擇。