使用返回與其參數相同類型的可區分聯合來聲明 TypeScript 函數的最佳方法是什么？

Question

鑒於這個簡化的 vanilla JS 函數：

function getStringOrNumber(val) {
  if (typeof val === 'string') {
      return 'It was a string';
  } else {
      return 5;
  }
}

我怎么能告訴 TypeScript 當它得到一個字符串時它返回一個字符串，當它得到一個數字時它返回一個數字？

我嘗試了不同的方法，發現使用這些重載是有效的，但它似乎過於復雜，我想知道我是否遺漏了什么。 特別是，在這個解決方案中，我不明白為什么需要第三行（有關更多信息，請參見下面的鏈接）。

function useOverloadsExtra(val: string): string
function useOverloadsExtra(val: number): number
function useOverloadsExtra(val: string | number): string | number
function useOverloadsExtra(val: string | number): string | number {
    if (typeof val === 'string') {
        return 'It was a string';
    } else {
        return 5;
    }
}

這是我嘗試過的其他解決方案

Answer 1

您的重載解決方案很接近。 問題出在你的測試上。 在您的測試中，您正在調用傳遞聯合作為參數的方法，但聯合不是允許的值：只有string和number 。 最后一個重載（“實現重載”） 不是簽名的一部分。 因此，您的測試必須執行縮小，如下所示：

function getValOverloads(val: string | number): string | number {
    if (typeof val === 'string')
        return useOverloads(val);
    else
        return useOverloads(val);
}

如果您希望能夠傳遞聯合（從而接收聯合作為返回值），您應該添加第三個重載（就像您在useOverloadsExtra上useOverloadsExtra ）。