2017-02-21 6 views
5

これらの多数のヌルチェックを回避する方法や、少なくとも生産性が低下していると思われる点を少なくとも理解する方法は不思議です。私はnullをチェック省略した場合フロータイプは常にヌルチェックを必要とします

Flowtypeはこのために私にエラーを与えている:誰が知っているので、私は、あまりにもすべての単一のコールバックで文書本体のそれはnullチェックをしなければならない

var myEl = new MyElement() 
if (document.body != null) { // error on next line if omitted 
    document.body.appendChild(myEl) 
} 

を、多分身体ここではヌルですか? これはトータルオーバーキルだと思います。それだけでなく、そのような単純なnullcheckのポイントは何ですか?プログラムの重要な部分を静かにスキップし、どこか他の場所で未定義の動作を表示し、アプリケーションのデバッグをずっと難しくします。 実際にここでエラーが発生した場合は、この時点でnull例外があるほうがよいでしょう。なぜなら、javascriptで記述するこの小さな2行コードセグメントは、flowtypeでこのようにする必要があるからです。

var myEl = new MyElement() 
if (document.body != null) { 
    document.body.appendChild(myEl) 
} else { 
    console.error("null error") 
} 

だから、私はちょうどエラーに実行する場合、私は無料で得るだろう何かをトレースするために追加のコード行といくつかの入れ子。そして私はすべての単一のquerySelectorにこれらの4行が必要です。あらゆる単一のdocument.bodyで。 1つのgetElementByTagNameごとに。これだけで、おそらくコードベース全体が10%増加します。 これは厳密にこれを強制するポイントは何ですか?

他の言語でも、必要に応じてこれらのホットスポットを徐々に試してみることができます。フローでもどちらでもできません。私はtry-catchを追加するかどうかにかかわらずエラーを表示します。

+0

'if(!document.body)は' if/else'の代わりに新しいError(); 'をスローすることができます。今日の終わりに、Flowはここで仕事をしています。これは、時間システムによって捕らえられるランタイムエラーを100%回避します。 'try/catch'は明示的な例外を捕捉するためのものですが、' null'チェックは型システムの責任です。一部の言語では許可されていますが、フローでは許可されていません。 – loganfsmyth

+0

@Blub私はFlowtypeエラーが何であるか尋ねますか?それは答えに役立つかもしれません。 FlowtypeはMaybe型として扱うことができるので、JavaScriptのnullであるとは限りません。 –

+0

@KevinTomiyoshiYangファイル: 'メソッドの呼び出し' appendChild'(メソッドはnull値でも呼び出せません) ' – Blub

答えて

7

タイプチェッカーを使用すると、強制するルールを選択することになります。 null可能な型のプロパティにアクセスすることは、これらの制限の1つです。したがって、null値の例外を設定する場合は、明示的にスローしてFlowに証明する必要があります。あなたは、インスタンスのために投げることで

if (!document.body) throw new Error("Unexpectedly missing <body>."); 
export const body: HTMLElement = document.body; 

export function querySelector(el: HTMLElement, selector: string): HTMLElement { 
    const result = el.querySelector(selector); 
    if (!result) throw new Error(`Failed to match: ${selector}`); 
    return result; 
} 

のようなモジュールを作ることができ、これらの機能は、明示的にすべてのケースで「私は要素を返します」、とnull例では、彼らは例外がスローされますと言います。

は、その後、あなたの通常のコードでは、あなたは、あなたがそれらの

import {body, querySelector} from "./utils"; 

body.appendChild(document.createElement('div')); 

querySelector(body, 'div').setAttribute('thing', 'value'); 

を使用することができますし、それが財産をです。TypeCheckますが保証されています。

+2

Flow special-casesは 'invariant'という名前に気づく価値があります。 'assert'からinvariantをインポートしたり、' invariant'の実装を提供したり、あなたが思いついた 'if' /' throw'ではなく 'invariant(document.body)'と書くことができます。それは入力する方が速く、もっと読みやすいIMOです。 –

関連する問題