流量 - 如何檢查數字範圍？

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)} /> 

這確實迫使消費者調用而不是自動發生的驗證功能，但流量會告訴他們這樣做，你能保證你的代碼是正確的。