メインコンテンツにスキップ

Import Type の発表

Flow 0.3.0 以降、別のモジュールから型をインポートできるようになりました。例えば、型注釈で参照する目的でのみクラスをインポートする場合、新しい import type 構文を使用できるようになりました。

動機​

このような経験はありませんか？

// @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;
}

これで解決策があります！この問題を解決するために（そして、ES6モジュール構文の近い将来を見据えて）、新しい import type 構文を追加しました。import type を使用すると、ここで本当に意味したいこと、つまりクラス自体ではなく、クラスの型をインポートしたいということを伝えることができます。

Import Type の導入​

上記のコードの代わりに、次のように書くことができるようになりました。

// @flow

import type URI from 'URI';
module.exports = function(x: URI): URI {
  return x;
};

複数のクラス（例えば、Crayon クラスと Marker クラスのような）をエクスポートするモジュールがある場合、それらの型のそれぞれを、次のようにまとめてまたは別々にインポートできます。

// @flow

import type {Crayon, Marker} from 'WritingUtensils';
module.exports = function junkDrawer(x: Crayon, y: Marker): void {}

変換​

型注釈やその他の Flow の機能と同様に、import type も、コードを実行する前に変換する必要があります。変換は、react-tools 0.13.0 がまもなく公開される際に利用可能になりますが、今のところは 0.13.0-beta.2 で利用可能であり、以下のようにインストールできます。

npm install react-tools@0.13.0-beta.2

想定される Q&A​

ちょっと待って、import type 宣言を追加した後、実行時に何が起こるのですか？​

何も起こりません！他の Flow の構文と同様に、すべての import type 宣言は削除されます。

import type を使用して、別のモジュールから型エイリアスを取り込むこともできますか？​

まだ完全にではありません…しかし、もうすぐです！最初に構築する必要がある他のいくつかの可動部分がありますが、取り組んでいます。

編集：はい！Flow 0.10 以降では、import type 構文を補完するために export type MyType = ... ; 構文を使用できます。以下は簡単な例です。

// @flow

// MyTypes.js
export type UserID = number;
export type User = {
  id: UserID,
  firstName: string,
  lastName: string
};
// @flow

// User.js
import type {UserID, User} from "MyTypes";

function getUserID(user: User): UserID {
  return user.id;
}

今のところ、明示的な名前付きエクスポートステートメント（つまり、export type UserID = number;）のみをサポートしていることに注意してください。将来のバージョンでは、潜在的な名前付きエクスポートステートメント（つまり、type UserID = number; export {UserID};）およびデフォルトの型エクスポート（つまり、export default type MyType = ... ;）のサポートを追加できます…ただし、今のところ、これらの形式は型エクスポートではまだサポートされていません。