Question

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

当我使用prop-types模块时，我可以做custom validation但是在流程中我不知道如何做这样的事情。

有人能帮助我吗？

Answer 1

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

好处是，有了一些前期成本，你可以获得运行时和编译时验证。

让我们说我想确保传入的数字在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会告诉他们这样做，你可以保证你的代码是正确的。

流程 - 如何检查数字范围？

1 个答案: