Flow 允许您使用以下语法来导入类型:
// SomeClass.js
export default class SomeClass {}
// SomeFile.js
import type SomeClass from './SomeClass';
使用import type
而不是import
有什么好处?它是否告诉 Flow 更多信息并让它执行更好的静态分析?
对于类的特定情况,任何一个示例都可以。关键是它像这样分解:
import type ... from
导入流类型import ... from
导入标准 JS 值以及该值的类型。
JS 类生成一个值,但 Flowtype 也将类声明解释为类型声明,因此两者兼而有之。
那么import type
哪里重要呢?
- 如果您要导入的内容没有值,则在某些情况下,使用值导入将被解释为错误,因为大多数JS工具都不知道Flow的存在。
- 例如,
export type Foo = { prop: number };
只能用import type { Foo } from ...
导入,因为没有名为Foo
- 如果您要导入的内容具有JS值,但您想要的只是类型
- 可以使代码更具可读性,因为从导入中可以清楚地看出只使用该类型,因此文件中的任何内容都无法创建该类的新实例。
- 有时,仅导入类型可以避免文件中的依赖关系循环。根据代码的编写方式,有时导入的顺序很重要。由于
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;
}
由于我们将URI
导入到此组件中,linter
将检查我们是否在此组件中使用了该类。但是,我们仅将其用作流类型检查,因此linter
会抛出一个错误,说我们导入了未使用的变量。