TypeScript 中的 import type 和 import：深入解析两者的区别

在 TypeScript 中，import type 和 import 是两种不同的导入方式，它们在语法和用途上存在显著差异。理解并正确使用它们，对于编写高质量的 TypeScript 代码至关重要。
首先，让我们了解一下 import 语句。在 TypeScript 中，import 语句用于导入其他模块或文件的顶层声明。这意味着你可以使用 import 语句将模块中的函数、类、变量等引入到当前文件中。例如：

import { add } from './math';

上述代码从 ‘./math’ 模块导入了名为 ‘add’ 的函数。现在你可以在当前文件中使用这个函数。
然而，import 语句有一个局限性：它只能导入顶层声明，而无法导入类型声明。如果你想导入某个模块的类型声明，你需要使用 import type 语句。
import type 语句用于导入其他模块的类型声明。这意味着你可以使用 import type 语句将其他模块的类型引入到当前文件中，以便在当前文件中使用这些类型。例如：

import type { Vector } from './vector';

上述代码从 ‘./vector’ 模块导入了名为 ‘Vector’ 的类型声明。现在你可以在当前文件中使用这个类型声明。
需要注意的是，import type 语句并不会导入实际的顶层声明，而只是导入类型声明。这意味着你不能直接使用导入的类型声明来创建实例或调用函数。例如，如果你尝试使用 import type 导入的 Vector 类型来创建一个 Vector 实例，你会收到一个编译错误。
另外，import type 语句也可以用于导入多个类型声明。例如：

import type { Vector, Matrix } from './vector';

上述代码导入了 ‘./vector’ 模块中的 ‘Vector’ 和 ‘Matrix’ 两个类型声明。
在实际应用中，import type 和 import 的选择取决于你的需求。如果你需要导入某个模块的顶层声明并在当前文件中使用它们，你应该使用 import 语句。如果你只需要导入某个模块的类型声明，以便在当前文件中使用这些类型，你应该使用 import type 语句。
此外，import type 语句对于实现接口和类型别名非常有用。通过使用 import type，你可以方便地将其他模块的类型声明引入到当前文件中，以便实现接口或定义类型别名。例如：

import type { Vector } from './vector';
interface Position {
x: number;
y: number;
}
type Point = Vector<Position>; // 使用 Vector 类型实现 Position 接口

在上述示例中，我们使用 import type 语句导入了 Vector 类型声明，并将其应用于 Position 接口的实现中。通过这种方式，我们可以利用 Vector 的属性 x 和 y 来定义 Position 接口的成员。
总之，import type 和 import 在 TypeScript 中各有其用途和特点。理解并正确使用它们，可以帮助你编写更加清晰、可维护的 TypeScript 代码。在使用时，根据实际需求选择合适的导入方式是关键。