フロー - 数値の範囲を確認するには？

Question

フローがcheck a set of possible valuesになることがわかりましたが、数字の可能な範囲をどのように確認できるか分かりません。

私はprop-typesモジュールを使用していましたが、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)} /> 

これは代わりに、それは自動的に行われたの検証関数を呼び出すために力の消費者を行いますが、フローはそうするためにそれらを教えてくれますし、あなたが正しいとあなたのコードを保証することができます。