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

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才是一個正確的選擇。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *