フローのパラメータ分散

関数がさまざまなタイプのパラメーターを受け取ることができるようにしたい場合があります。 TypeScriptの共用体型に少し似ています。 Flowを使用してそれを行う方法を見てみましょう。

複数のタイプのパラメーターを受け取る関数の作成

| で区切られた、可能なタイプをリストするだけです。

function capitalize(
  // `capitalize` can take a string or an array of strings.
  words: string | Array<string>,
  // `capitalize` will return an array of strings either way.
): Array<string> {
  // At this point, Flow does not know if `words` is a string or an array,
  // so properties or methods specific to those types,
  // such as `map` and `toUpperCase`, cannot be accessed.
  // However, properties or methods that are shared by both, such as `length`, can be accessed.
  if (!Array.isArray(words)) {
    // Flow now knows that `words` is a string, so we can use string methods.
    return [words.toUpperCase()];
  }
  // Flow now knows that `words` is an array, so we can use array methods.
  return words.map(word => word.toUpperCase());
}

フローがタイプを判別するのを支援

上記の例では、Array.isArrayを使用してwordsのタイプを判別しましたが、Flowがこれを行う方法は他にもあります。

// Through truthiness
function cube(val: number | void): number {
  // If `val` is falsy, it must be undefined (or 0).
  if (!val) {
    return 0;
  }
  // Otherwise, `val` must be a number.
  return val ** 3;
}

// With typeof
function getDigits(val: string | number): number {
  // If typeof val is 'number', it must be a number.
  if (typeof val === 'number') {
    return Math.ceil(Math.log10(val));
  }
  // Otherwise,`val` must be a string.
  return val.length;
}

// With instanceof
function getName(name: string | Nametag): string {
  // If `name` is an instance of the class `Nametag`, it must be a Nametag.
  if (name instanceof Nametag) {
    return name.name;
  }
  // Otherwise, `name` must be a string.
  return name;
}