Flow - 如何检查数字范围？

Question

我看到 Flow 可以 check a set of possible values 但我不知道如何检查可能的数字范围。

当我使用 prop-types 模块时，我可以做一个但在 Flow 中我不知道如何做这样的事情。

有人可以帮我吗？

Answer 1

如果有人发现这个，我将添加一个答案，允许您检查一系列数字，但需要您创建额外的类型来表示该信息。

好处是，通过一些前期成本，您可以获得运行时和编译时验证。

这是 flow.org/try link 的演示。

假设我想确保传入的数字介于 0 和 5 之间。

// Create a type that we can use for validation
type WithinRange = {};

// Create our extended number type
type RangedNumber = number & WithinRange;

// Validation function that works 
function makeRangeCheckedNumber(x: number): ?RangedNumber {
  if (x > 0 && x < 5) {
    // type cast to any so we can type cast back to RangedNumber
    return ((x: any): RangedNumber);
  } else {
    return null;
  }
}

// function that were to take the range checked number
function someComputation(num: RangedNumber): void {
}

const myInputNumber = 5;


// So we have to wrap it in the validation function we wrote up
const maybeWithinRangeInput = makeRangeCheckedNumber(myInputNumber);

// And this would force users of someComputation to handle both cases
if (maybeWithinRangeInput == null) {
  throw new Error();
} else {
  someComputation(maybeWithinRangeInput);
}

假设您在生产构建中剥离 Flow 类型，所有 Flow 类型都将被剥离，您将只剩下运行时验证函数。

在您的 React 组件中，您现在也可以使用 RangedNumber

type Props = {
  input: RangedNumber
}

class MyComponent extends React.Component {
  props: Props
  ...
}

并且任何想要使用您的组件的人都必须确保在调用您的组件时使用验证功能。

// Would error until they wrap this in makeRangeCheckedNumber
<MyComponent input={6} />

// This is fine
<MyComponent input={makeRangeCheckedNumber(6)} />

这确实会强制消费者调用验证函数而不是让它自动发生，但 Flow 会告诉他们这样做并且您可以保证您的代码是正确的。

Flow - 如何检查数字范围？

Flow - How to check range of numbers?

javascript

flowtype