有没有必要使用Flow执行'import type'而不是'import'？

Question

Flow允许您使用以下语法导入类型:

// SomeClass.js
export default class SomeClass {}

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

使用import type而不是import？有什么好处？它是否告诉Flow更多信息并让它执行更好的静态分析？

Answer 1

对于类的特定情况，无论哪种示例都可以工作。关键是它会像这样分解：

• import type ... from 导入流类型
• import ... from 导入标准JS值以及该值的类型。

JS类产生一个值，但是Flowtype还将类声明解释为类型声明，因此两者都是。

那么哪里import type重要？

1. 如果您要导入的东西没有值，则在某些情况下，使用值导入将被解释为错误，因为大多数JS工具都不知道Flow存在。
   • export type Foo = { prop: number };例如，只能与一起使用import type { Foo } from ...，因为没有名为的值Foo
2. 如果您要导入的东西具有JS值，但您只需要类型
   • 仅导入类型可以使代码更具可读性，因为从导入中可以清楚地看出仅使用了类型，因此文件中的任何内容都无法例如创建该类的新实例。
   • 有时，仅导入类型将使您避免文件中的依赖周期。根据代码的编写方式，有时可能会import type ...影响导入的顺序。由于仅影响类型检查，而不影响运行时行为，因此可以导入类型而无需实际执行导入文件，从而避免了潜在的循环。

Answer 2

正如此链接所述

使用导入类型，您想要导入类的类型，而不是真正的类本身。

在同一链接中给出的示例如下

// @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会抛出错误，指出我们导入了未使用的变量。