使用 Flow 执行"导入类型"而不是"导入"有什么意义吗?



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哪里重要呢?

  1. 如果您要导入的内容没有值,则在某些情况下,使用值导入将被解释为错误,因为大多数JS工具都不知道Flow的存在。
  • 例如,export type Foo = { prop: number };只能用import type { Foo } from ...导入,因为没有名为Foo
  1. 如果您要导入的内容具有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会抛出一个错误,说我们导入了未使用的变量。

最新更新