你知道為什么下圖中定義了這么多ref函數(shù)，它們是干什么用的嗎？如果你還不是很清楚，看完本文的內(nèi)容，或許你就會明白了。

這是一個簡單的logError函數(shù)，接受一個字符串類型的參數(shù)，用于輸出錯誤信息。

function logError(msg: string) {
  console.error(`Error occurred: ${msg}`);
}
logError("Missing required field.");

現(xiàn)在問題來了，如果我們想讓logError函數(shù)以數(shù)組的形式支持多條錯誤信息怎么辦？給你幾秒鐘的時間思考一下，你想出答案了嗎？

解決方案之一是使用聯(lián)合類型：

function logError(msg: string | string[]) {
  if (typeof msg === "string") {
    console.error(`Error occurred: ${msg}`);
  } else if (Array.isArray(msg)) {
    console.error(`Errors occurred: ${msg.join("\n")}`);
  }
}
logError("Missing required field.");
logError(["Missing required field.", "The length cannot be less than 6."]);

另一種解決方案是使用函數(shù)重載，使用函數(shù)重載技術(shù)，我們需要定義重載簽名和實現(xiàn)簽名。

重載簽名定義了函數(shù)中每個參數(shù)的類型和函數(shù)的返回值類型，但不包含函數(shù)體。一個函數(shù)可以有多個重載簽名。

實現(xiàn)簽名的參數(shù)類型和返回值類型需要使用更通用的類型，同時也包含實現(xiàn)簽名的函數(shù)體。一個函數(shù)只能有一個實現(xiàn)簽名。

結(jié)合重載簽名和實現(xiàn)簽名后，我們實現(xiàn)了上述功能：

請注意，只有重載簽名是可調(diào)用的。當 TypeScript 編譯器處理函數(shù)重載時，它會查找重載列表并嘗試使用第一個重載定義。如果匹配則立即返回。

當使用與實現(xiàn)簽名對應(yīng)的類型的參數(shù)調(diào)用實現(xiàn)簽名函數(shù)時，會發(fā)生錯誤。

除了重載函數(shù)，我們還可以重載類中的方法。方法重載是指調(diào)用同一個類中同名不同參數(shù)（參數(shù)類型不同、參數(shù)個數(shù)不同、參數(shù)個數(shù)相同時參數(shù)順序不同）的方法，而該方法 匹配它被選中，按照實參的形式進行運算。

讓我們看一個方法重載的例子：

class Calculator {
  add(a: number, b: number): number;
  add(a: string, b: string): string;
  add(a: string, b: number): string;
  add(a: number, b: string): string;
  add(a: string | number, b: string | number) {
  if (typeof a === 'string' || typeof b === 'string') {
    return a.toString() + b.toString();
  }
    return a + b;
  }
}
const calculator = new Calculator();
const result = calculator.add('Bytefer', ' Kakuqo');

看完這篇文章，你應(yīng)該知道函數(shù)重載技術(shù)是在Vue3響應(yīng)式模塊中ref函數(shù)背后使用的。

如果你想學習 TypeScript，那就不要錯過 Mastering TypeScript 系列。