跳至主要内容

宣布导入类型

从 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，你可以表达你的真正意图——你想要导入类的类型，而不是类本身。

导入类型的出现​

所以，你可以用下面的代码来代替上面的代码

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

预期问答​

等等，但是在我添加了 import type 声明之后，运行时会发生什么？​

什么都不会！所有 import type 声明都会像其他 flow 语法一样被剥离。

我可以使用 import type 从另一个模块中引入类型别名吗？​

现在还不行……但很快就会！我们还需要构建一些其他部分，但我们正在努力。

编辑：可以！从 Flow 0.10 开始，你可以使用 export type MyType = ... ; 语法来补充 import type 语法。这是一个简单的例子

// @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 = ... ;）……但目前这些形式还不支持类型导出。