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

Question

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

当我使用道具类型模块时，我可以做一个custom validation但在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); 
} 

之间假设你剥流量类型进行生产版本，所有的流量类型将被剥离出来，你”将留下运行时验证功能。

在你的阵营组件，您现在可以使用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)} /> 

这确实迫使消费者调用而不是自动发生的验证功能，但流量会告诉他们这样做，你能保证你的代码是正确的。