型別和 type 是同一件事嗎？

上一篇認識了 string、number、boolean 等型別，不過在 TypeScript 裡，還有一個真的叫作 type 的關鍵字：

type TodoId = number

這兩個概念可能比較容易混在一起，可以先簡單區分：

• 型別：描述資料的種類，例如 string、number
• type：替一段型別取一個名稱的 TypeScript 關鍵字

使用 type 建立出來的名稱稱為 Type Alias，也就是「型別別名」。

以前寫 JavaScript 時不用寫 type，是因為 type 並不是 JavaScript 的語法，而是 TypeScript 提供的型別工具。JavaScript 的資料本身仍然有字串、數字等不同型別，只是不需要事先使用 type 替它們建立名稱。

使用 type 替型別取名字

假設 Todo 的 id 是數字，可以直接寫成：

function deleteTodo(id: number) {
  // ...
}

也可以先替這個型別取名：

type TodoId = number

function deleteTodo(id: TodoId) {
  // ...
}

TodoId 最後仍然代表 number。type 不會建立新的資料，也不會把數字轉換成其他東西，只是替原本的型別取了一個更符合用途的名稱。

Type Alias 也不會讓 TodoId 變成一種與 number 完全不同的型別，其他數字仍然可以放進去：

const price = 100
const id: TodoId = price

這段程式不會產生型別錯誤，因為 TodoId 本質上仍然是 number。

簡單的基本型別不一定需要另外取名。只有在名稱能讓用途更清楚，或相同型別會被重複使用時，type 才比較能發揮作用。
TypeScript 官方文件：Type Aliases

使用 type 描述 Todo 資料

type 也可以描述物件應該有哪些屬性：

type Todo = {
  id: number
  text: string
  completed: boolean
}

這段程式可以理解成一份 Todo 資料的格式說明：

• id 必須是數字
• text 必須是字串
• completed 必須是布林值

建立 Todo 時，就可以使用這個型別：

const newTodo: Todo = {
  id: Date.now(),
  text: '學習 TypeScript',
  completed: false,
}

當少了 completed，或將 id 寫成字串，TypeScript 就會提出錯誤。

如果不使用 type，其實也能直接把整段物件型別寫在變數旁邊。但當相同的資料格式會在多個地方使用時，建立 Todo 型別可以減少重複，也能更清楚地表示這份資料的用途。

使用 | 列出可能的值

type 也可以和 Union Type 一起使用：

type TodoStatus = 'all' | 'active' | 'completed'

| 可以先理解成「或」，表示 TodoStatus 只能是列出的其中一個值：

let status: TodoStatus = 'all'
status = 'completed'

如果使用沒有列入的內容：

status = 'loading'

TypeScript 就會提出錯誤。

這裡的 | 不只是拿來分隔文字，而是在組合多種可能的型別或值。
TypeScript 官方文件：Union Types

專案中的 import type

目前 Todo List 專案還出現了：

import type { Todo } from './types'

這裡不是在建立 Type Alias，而是表示匯入的 Todo 只會用在型別的位置。

另外，即使原本的 Todo 不是用 type 建立的，也一樣可以透過 import type 匯入——這種宣告物件型別的另一種寫法，會留到下一篇再介紹。
TypeScript 官方文件：Type-only Imports and Exports

今日回顧

• 型別用來描述資料，type 則是替型別取名的關鍵字
• 使用 type 建立的名稱稱為 Type Alias
• Type Alias 只是替型別建立別名，不會因此建立一個全新且獨立的型別
• type 可以描述物件的資料格式
• | 可以組合多種可能的型別或值
• import type 表示匯入的內容只用於型別檢查

上一篇認識了 TypeScript 為什麼需要型別，這次則知道了 type 可以替一段型別取名。當同一種資料格式會在不同地方出現時，就不需要每次都重新說明它應該長什麼樣子。
下篇見!