---
# System prepended metadata

title: TypeSCript-型別系統
tags: [TypeScript]

---

# 型別系統

## 原始資料型別與物件型別
| 原始型別 （Primitive Types） | 物件型別（Object Types） |
| -------- | -------- | 
| 字串（String）     | 函式（Function）     | 
| 數字（Number）     | 物件（Object）     | 
| 布林（Boolean）     | 陣列（Array）     | 
| undefined     | Date     | 
| Null     | RegExp    | 
|   自訂義型別   | Error    | 

範例如下：
```
// 原始型別
let sayHello: string = 'Hello World！';　// 字串 String
const str: string = 'hello'; // 字串 String
const a1: number = 333; // 數字 Number
const a2: number = 222; // 數字 Number
const isOpen:boolean = true; // 布林 boolean

// 相減產生氣 物件型別
function subtractNumbers(num1: number,num2: number){
  return num1 - num2
}

const total = subtractNumbers(a1,a2)
console.log(total)
```
如帶入錯誤的型別，則會警告跳錯誤提示，如下：
```
const total2 = subtractNumbers('hello',a2)
```
![image](https://hackmd.io/_uploads/H1PhY-i6T.png)
```
hello.ts:15:32 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

15 const total2 = subtractNumbers('hello',a2)
```

---

## TypeScript vs JavaScript
| |TypeScript |JavaScript |
|---|---|---|
|型別系統|靜態型別(static typing) | 動態型別(dynamic typing)|
|執行環境|需要編譯成 JavaScript 才能在瀏覽器或 Node.js 中運行。 | 可以直接在瀏覽器和 Node.js 中運行|
|型別檢查|開發階段可偵測 **型別系統** 上的錯誤 | 開發階段 **沒辦法偵測型別系統** 錯誤|
|型別擴充|可透過 **介面（Interfaces）、泛型（Generics）和枚舉（Enums）** 自定義複雜型別 | 無|
|工具支持|由於靜態型別，提供更好的自動完成、重構和錯誤提示。 | 提供基本的開發工具支持，但可能不如 TypeScript 強大。|

---

## 型別檢查詳解，多人團隊把關程式碼品質

Q：是否用 TypeScript 後，JavaScript 程式碼，就不用寫型別驗證？

A:
1. 僅在開發階段上，進行型別的檢查
2. 亦可讓新人進來時，知道每個值帶入的是什麼樣的資料型別
3. 當資料更複雜時，更可以從資訊上進行觀察
4. 完善的型別把關
```
// 輸出依然會是一樣的程式碼
const total2 = subtractNumbers('hello',a2)
```
![image](https://hackmd.io/_uploads/H1PhY-i6T.png)

Q：是否用 TypeScript 後，JavaScript 程式碼，就不用寫型別驗證？
A：TypeScript 僅做型別檢查，外部使用者輸入表單、API 資料還是需寫驗證

Q: 每個變數、函式參數都要定義型別嗎？
A: 非必要，簡單易推斷的部分可以不用特別定義
