用 Flow 做“导入类型”而不是“导入”有什么意义吗？答案

【问题标题】：Is there a point to doing 'import type' rather than 'import' with Flow?用 Flow 做“导入类型”而不是“导入”有什么意义吗？
【发布时间】：2018-10-30 15:39:42
【问题描述】：

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

// SomeClass.js
export default class SomeClass {}

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

使用import type 代替import 有什么好处？它会告诉 Flow 更多信息并让它执行更好的静态分析吗？

【问题讨论】：

标签： javascript ecmascript-6 flowtype commonjs

【解决方案1】：

正如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 将检查我们是否使用了该组件中的类。但是，我们仅将其用作流类型检查，因此linter 将抛出错误，说我们导入了未使用的变量。

【讨论】：

【解决方案2】：

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

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

一个JS类产生一个值，但是Flowtype也将一个类声明解释为一个类型声明，所以both。

那么import type 的重要性在哪里？

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

【讨论】：