---
# System prepended metadata

title: ' TypeScript 型別註釋與型別推斷'
tags: [TypeScript]

---

# 型別註釋（Type Annotations）VS. 型別推斷（Type Inference）
| |型別註釋 (Type Annotations)|型別推斷 (Type Inference)|
|---|---|---|
|定義|明確指定型別|自動推斷型別|
|使用時|無法自動推斷時|初始化時或型別明顯時|
|範例|```let age: number = 30```;|```let age = 30;```|
|優點|型別明確，安全|簡潔|
|缺點|程式碼冗長|需依賴推斷，可能不明確|
|實踐|明確的 API 或複雜的邏輯，需要確保型別正確無誤時使用。|對於簡單且易於推斷的區域變數或當型別明顯時使用。|



## 型別註釋 (Type Annotations)
手動明確定義型別

```
let a:number = 1
a = 'string'
```
![image](https://hackmd.io/_uploads/SkJ6FNNCa.png)


## 型別推斷 (Type Inference)
由 TypeScript 自動幫你去推定型別。簡單容易推斷的情況下可以採用這種方式
```
let a = 1;
// 上述進行以下流程
// 變數宣告
// 變數賦值
// 自動推斷為 值 為 number
a = 'string';
```
![image](https://hackmd.io/_uploads/Hkz2t4V0a.png)


## 無法型別推斷情況
TypeScript特性 any 代表什麼樣的型別值都可以通過
```
let a;
// 上述進行以下流程
// 僅做變數宣告
// 並沒有賦予值
// 需在同行進行宣告與賦值
a = 1;
a = 'string';
```
![image](https://hackmd.io/_uploads/S1AojVVA6.png)


## 須型別注釋與型別推斷情況
```
// 計算每季紅利的函式

// salary = 月薪、performanceRating 績效 ，帶入參數定義為 number，他人才知道帶入的是number
function calculateBonus(salary: number, performanceRating: number) {
  let bonusPercentage: number; // 型別註釋

  if (performanceRating > 8) {
    bonusPercentage = 0.1;
  } else if (performanceRating > 5) {
    bonusPercentage = 0.05;
  } else {
    bonusPercentage = 0;
  }
  
  // 計算時，number * number =>因此不用刻意定義型別
  const totalBonus = salary * bonusPercentage; // 型別推斷
  // 型別注釋 可寫，此處沒必要
  // const totalBonus:number = salary * bonusPercentage; 
  
  return totalBonus;
}
```
![image](https://hackmd.io/_uploads/H1QA3VVRT.png)
