使用 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

如本文所述link

With import type, you want to import the type of the class and not really the class itself.

与下面link相同的示例

// @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 将检查我们是否在该组件中使用了 class。但是，我们只将它用作流类型检查，因此 linter 将抛出一个错误，指出我们导入了未使用的变量。

Answer 2

对于 classes 的特定情况，这两个示例都可以。关键是它分解成这样：

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

一个JS class产生一个值，但是Flowtype也将一个class声明解释为类型声明，所以它是两者.

那么 import type 重要的地方在哪里？

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

使用 Flow 'import type' 而不是 'import' 是否有意义？

Is there a point to doing 'import type' rather than 'import' with Flow?

javascript

commonjs

ecmascript-6

flowtype