函式返回型別

首先，我們來定義一個名為 add 的函式。這個函式接受兩個參數，這兩個參數都被定義為數字型別。當滑鼠游標懸停在函式 add 上，觀察到冒號後的描述。這個描述告訴我們這個函式的返回型別。在這裡，TypeScript 能夠自動推斷函式的結果將是一個數字並且返回，所以這個函式的返回型別被設定為數字型別。

function add(n1: number, n2: number) {
  return n1 + n2;
}

當我們將這裡 n1 和 n2 加上 toString，TypeScript 能夠正確推斷這個函式的返回型別是一個字串型別。

function add(n1: number, n2: number) {
  return n1.toString() + n2.toString();
}

當我們給予明確的返回型別，TypeScript 會使用我們提供的型別，即使它可以自動推斷出正確的型別。以下是具有明確返回型別的範例：

範例一：當函式的輸入型別與返回型別不符。

function add(n1: number, n2: number): string {
  return n1 + n2; // TypeScript 報錯，類型 'number' 不可指派給類型 'string'
}

範例二：當函式的輸入型別與參數定義型別不符。

function add(n1: number, n2: number): number {
  return n1 + n2;
}

const result = add(5, '10'); // TypeScript 報錯，類型 'string' 的引數不可指派給類型 'number' 的參數

void 型別

void 實際上意味著函式不會返回任何結果。在 TypeScript 中，當函式的返回型別為 void 時，我們可以省略冒號後的 void，因為 TypeScript 能夠自動推斷返回型別為 void。

function add(n1: number, n2: number): number {
  return n1 + n2;
}

function printResult(num: number) { // void 可以省略
  console.log(`結果:${num}`); // 結果:17
}

printResult(add(5, 12));

接著，讓我們來看一下函式 printResult 實際上返回的是什麼。可以注意到它返回了 undefined，而在 TypeScript 中，undefined 是一個有效的型別。

function printResult(num: number): void {
  console.log(`結果:${num}`); // 結果:17
  return; // 即使 void 表示函式不返回值，仍然可以使用 return 語句，但不能指定返回值
}

console.log(printResult(add(5, 12))); // undefined

當我們明確將函式的返回型別指定為 undefined 時，TypeScript 會要求在函式中包含明確的 return 語句。相反，使用 void 可以更清晰地表示這個函式不包含 return 語句。

function printResult(num: number): undefined { // TypeScript 報錯
  console.log(`結果:${num}`); // 結果:17
  return; // 加上 return 解決 TypeScript 錯誤
}

printResult(add(5, 12));

本日重點

1. 明確指定函式的返回型別，透過在函式定義中使用冒號 : 和相應的型別來實現。
2. void 型別表示函式不返回任何值，它用於函式的返回型別為空。
3. 當函式的返回型別是 void 時，可以省略冒號和返回型別的定義。TypeScript 會自動推斷返回型別為 void。
4. 雖然 void 表示函式不返回值，但仍然可以在函式中使用 return 語句，但不能指定返回值。

參考

• TypeScript - 函式返回型別