流類型：“可選功能參數”和“可能的類型”之間的區別

Question

有人可以解釋一下“可選功能參數”和“也許類型”之間的區別嗎，如Flow文檔的本頁所述？

這些定義聽起來非常相似：

可能的類型： “可能的類型適用於值是可選的地方”

可選的函數參數： “函數可以具有可選的參數，其中參數名稱后面帶有問號？”。

我從語法角度了解差異。 但是，這聽起來好像都想在要為函數定義可選參數的情況下使用。 您將在哪里使用另一個？

Answer 1

沒有區別。 但它們又是完全不同的東西。

我認為這里存在一些概念上的混亂。 這是一個可選參數的示例：

function recase(str, lower) {
  if (lower) {
    return str.toLowerCase();
  }

  return str.toUpperCase();
}

recase('Test', true)
// "test"
recase('test')
// "TEST"
recase()
// Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

我們的函數有兩個參數。 第一個是必需的，如果我們不傳遞至少一個參數，則該函數將引發異常。 第二個是可選的，如果我們不通過第二個，則不會拋出異常，返回的值將有所不同。

請注意，我還沒有介紹任何類型。 這是因為此處的“可選參數”只是一般的編程概念。 Flow沒有稱為“可選參數”的某些固有功能。 流程提供的是一種鍵入可選參數的方法，稱為“也許類型”。

所以說我想在上面輸入我的函數。 好吧，第一遍可能看起來像這樣：

// We're taking a string and a boolean and returning a string, right?
function recase(str: string, lower: boolean): string {
  if (lower) {
    return str.toLowerCase();
  }

  return str.toUpperCase();
}

recase('Test', false)
// "TEST"
recase('Test', true)
// "test"
recase('Test')
// ^ Cannot call `recase` because function [1] requires another argument.

由於我們將lower鍵入為boolean ，因此flow期望將boolean作為第二個參數傳遞。 當我們不傳遞布爾值時，流程將引發錯誤。 我們的參數不再是可選的。 我們可以只從lower 刪除類型，但是默認情況lower將降至any類型，這意味着用戶可以傳遞他們想要的任何內容，這會使我們的類型變得模棱兩可且容易出錯。 這是我們可以做的一件事：

function recase(str: string, lower: void | boolean): string {
  if (lower) {
    return str.toLowerCase();
  }

  return str.toUpperCase();
}

recase('Test', true)
// "test"
recase('Test')
// "TEST"

在流中， void類型僅與undefined值匹配。 如果我們在調用recase時不提供lower的值，則lower的值將是undefined ，並通過將lower鍵入為void | boolean void | boolean我們告訴流程lower可以是boolean或undefined （未指定為參數）。

因此，顯然，這是一個非常常見的情況。 實際上如此普遍，以至於我們可能會考慮封裝它。 可以使用泛型來完成，如下所示：

// Let's call this Q for "Question" but it's nice and short
type Q<T> = void | null | T;

function recase(str: string, lower: Q<boolean>): string {
  if (lower) {
    return str.toLowerCase();
  }

  return str.toUpperCase();
}

請注意，我們已將null添加到我們的泛型類型中，因為undefined情況與希望為可選參數傳遞null的null情況重疊很多。

嗯，這是如此普遍，以至於流程為我們提供了相當於這種情況的語法糖，稱為“也許類型”。 如果您能夠將我們的Q類型重命名為? 那么您基本上會有類型。

function recase(str: string, lower: ?boolean): string {
  if (lower) {
    return str.toLowerCase();
  }

  return str.toUpperCase();
}