iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
Modern Web

從零開始進入 JavaScript & TypeScript 的世界系列 第 21

第 21 天- Union Types

對於 JavaScript 來說,所有的變數都是可以動態改變他的型別的,也就是說同一個變數可以先是 number, 就接又 assign string 給他。不過這樣一來就會造成程式碼的可讀性和可維護行降低,所以在 TypeScript 中都會強烈建議要指定變數的型別。但由於 JavaScript 的習性關係,有時候強制一個型別還是會缺乏許多彈性,造成在移植 JavaScript 到 TypeScript 的困難。也因此,雖然 TypeScript 不建議使用 any, 但他也提供了可以使用多種型別的機會,當我們要把 JavaScript 的程式碼移植到 TypeScript 時,可以這樣使用,至少會比使用 any 好一些,等之後再把他重構成單一型別。

語法

// unionTypesVariable 的型別可以是 string 或 number
let unionTypesVariable : string | number; 

多型別可以是兩個,三個,或是多個。

例子

let student : string | number;

student = "Chou";
console.log("Student is " + student);

student = 9527;
console.log("Student is " + student);

// 以上都是可行的,但如果這樣
student = false; // 這樣就會編譯失敗,因為 student 必須是 string 或 number

除了變數之外,回函式回傳值也可以多個型別,例如下面這個範例也是合法的寫法:

function getStudent(index:number) : string | number {
    if (index === 1) {
        return "Chou";
    } else {
        return 9527;
    }
}

上一篇
第20天-物件的雷區
下一篇
第22天-Literal Types(字面上的型別)
系列文
從零開始進入 JavaScript & TypeScript 的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言