web-dev-qa-db-ja.com

フローで「インポート」ではなく「インポートタイプ」を行うことに意味がありますか？

フローでは、次の構文を使用してタイプをインポートできます。

// SomeClass.js
export default class SomeClass {}

// SomeFile.js
import type SomeClass from './SomeClass';

importの代わりにimport typeを使用する利点は何ですか？ Flowにより多くの情報を伝え、より良い静的分析を実行させますか？

javascriptecmascript-6flowtypecommonjs
10
James Ko

クラスの特定のケースでは、どちらの例でも機能します。重要なことは、次のように分解されることです。

  • import type ... fromはフロータイプをインポートします
  • import ... fromは、標準のJS値とその値のタイプをインポートします。

JSクラスは値を生成しますが、Flowtypeもクラス宣言を型宣言として解釈するため、両方になります。

では、import typeはどこで重要なのでしょうか。

  1. インポートしているものが値を持たない場合、ほとんどのJSツールはフローが存在することを認識していないため、値のインポートを使用するとエラーとして解釈される場合があります。
    • export type Foo = { prop: number };は、たとえばFooという名前のvalueがないため、import type { Foo } from ...でのみ重要になります。
  2. インポートするものがJS値を持っているが、必要なのはタイプだけである場合
    • タイプのみを使用すると、インポートからコードが読みやすくなるため、タイプのみをインポートすると、コードが読みやすくなります。たとえば、ファイル内の何もそのクラスの新しいインスタンスを作成することはできません。
    • タイプのみをインポートすると、ファイルの依存関係の循環を回避できる場合があります。コードの記述方法によっては、インポートする順序が問題になる場合があります。import type ...は、実行時の動作ではなくタイプチェックにのみ影響するため、インポートしたファイルを実行せずにタイプをインポートして、潜在的なサイクルを回避できます。 。
9
loganfsmyth

これで述べたように リンク

インポートタイプでは、実際にはクラス自体ではなく、クラスのタイプをインポートする必要があります。

以下と同じリンクにある例

// @flow

// Post-transformation lint error: Unused variable 'URI'
import URI from "URI";

// But if you delete the require you get a Flow error:
// identifier URI - Unknown global name
module.exports = function(x: URI): URI {
  return x;
}

URIをこのコンポーネントにインポートしたため、linterは、このコンポーネントでクラスを使用したかどうかを確認します。ただし、フロータイプチェックとしてのみ使用しているため、linterは未使用の変数をインポートしたことを示すエラーをスローします。

3
Isaac