TypeScript 新手指南
  • 前言
  • 簡介
    • 什麼是 TypeScript
    • 安裝 TypeScript
    • Hello TypeScript
  • 基礎
    • 原始資料型別
    • 任意值
    • 型別推論
    • 聯合型別
    • 物件的型別——介面
    • 陣列的型別
    • 函式的型別
    • 型別斷言
    • 宣告檔案
    • 內建物件
  • 進階
    • 型別別名
    • 字串字面量型別
    • 元組
    • 列舉
    • 類別
    • 類別與介面
    • 泛型
    • 宣告合併
    • 延伸閱讀
  • 工程
    • 程式碼檢查
  • 感謝
Powered by GitBook
On this page
  • 簡單的例子
  • 存取聯合型別的屬性或方法
  • 參考

Was this helpful?

  1. 基礎

聯合型別

聯合型別(Union Types)表示取值可以為多種型別中的一種。

簡單的例子

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
let myFavoriteNumber: string | number;
myFavoriteNumber = true;

// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
//   Type 'boolean' is not assignable to type 'number'.

聯合型別使用 | 分隔每個型別。

這裡的 let myFavoriteNumber: string | number 的含義是,允許 myFavoriteNumber 的型別是 string 或者 number,但是不能是其他型別。

存取聯合型別的屬性或方法

當 TypeScript 不確定一個聯合型別的變數到底是哪個型別的時候,我們只能存取此聯合型別的所有型別裡共有的屬性或方法:

function getLength(something: string | number): number {
    return something.length;
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

上例中,length 不是 string 和 number 的共有屬性,所以會報錯。

存取 string 和 number 的共同屬性是沒問題的:

function getString(something: string | number): string {
    return something.toString();
}

聯合型別的變數在被賦值的時候,會根據型別推論的規則推斷出一個型別:

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 編譯時報錯

// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

上例中,第二行的 myFavoriteNumber 被推斷成了 string,存取它的 length 屬性不會報錯。

而第四行的 myFavoriteNumber 被推斷成了 number,存取它的 length 屬性時就報錯了。

參考

Previous型別推論Next物件的型別——介面

Last updated 4 years ago

Was this helpful?

()

Advanced Types # Union Types
中文版
上一章:型別推論
下一章:物件的型別——介面