前言
当我们开始接触TypeScript的时候，其主要目的就是为了让 JavaScript 更具有强类型的特性，从而可以更好的应对 JavaScript 在代码复杂度大、人员多、代码维护周期长等等情况下可能出现的问题。
然而，除此之外，在 TypeScript 中还有一些非常有趣的导入(import)方式，可以极大的减少代码量，提高代码的可读性及开发效率。
在本文中，我们将会介绍 TypeScript 的 import 语句中的类(import type)这个非常有趣的新特性，并从实际应用的角度出发，详细阐述它的使用及使用场景。
import type 是什么
在 TypeScript 中，我们通常使用 import 语句来引入一个模块（也可以称之为文件）中导出的某个变量。比如：
import { ReactNode } from 'react';上面的代码，我们从 react 模块中导入了变量 ReactNode ，后续可以使用它来声明变量或者作为其他函数的参数类型等。这种导入方式在我们已经比较熟悉了。
但是，自 TypeScript 3.8 版本开始，官方新增了一个 import type 的导入类型。顾名思义， import type 是用于引入类型的语法，而不是用于引入具体的变量。
import type { ReactNode } from 'react';上面的代码中，我们使用了 import type { ReactNode } from 'react' 的方式来引入类型 ReactNode，这种方式的主要作用是什么呢？
简单来说，它的作用是为导入的类型加上一层约束，告诉编译器这是一个类型，而不是一个具体的变量或者函数，从而避免引起其他不必要的编译问题。
import type 的使用
1. 引入第三方库的类型
在大多数情况下，我们使用第三方库时，并未考虑导入其类型声明文件，因此可能会在编译错误的时候发现一些非常诡异的错误，这些错误的原因有很大一部分是由于类型方面的问题导致的。
以 moment.js 库为例子。在使用 moment.js 的时候，我们通常需要使用它提供的类型定义文件 moment.d.ts 来约束使用。
这时候，我们就可以使用 import type 来引入 moment.js 的类型定义文件。
import type moment from 'moment';
这种方式，就好像我们使用了 import moment from 'moment' 来引入 moment 库一样，只不过我们只引入了 moment.js 库的类型。
这里，需要注意的是，如果是引入第三方库的类型的话，我们只需要使用 import type 即可，不需要再通过 import 导入具体的变量。
2. 防止循环依赖
在 TypeScript 中，循环依赖这种问题经常会出现。比如 a.ts 文件中使用了 b.ts 文件中导出的变量，而 b.ts 文件中又使用了 a.ts 文件中导出的变量。
这种循环依赖的情况下，使用普通的 import 语法来导入变量时，可能会遇到一些麻烦，比如：
-- -------------------- ---- ------- -- ---- ------ - - - ---- ------ ------ ----- - - ----- ------- -- ---- ------ - - - ---- ------ ------ ----- - - ----- -------
这里，我们在 a.ts 文件中使用了 b.ts 文件中的变量 b，而在 b.ts 中又使用了 a.ts 文件中的变量 a，这种情况下就会发生循环依赖的问题。
对于这种情况，我们可以使用 import type 来解决循环依赖问题。
-- -------------------- ---- ------- -- ---- ------ ---- - - - ---- ------ ------ ----- - - ----- -- --- ------- -- ---- ------ ---- - - - ---- ------ ------ ----- - - ----- -- --- -------
这里，我们在 a.ts 中使用 import type 来导入 B 类型，以及在 b.ts 文件中使用 import type 来导入 A 类型。这样，在互相关联的 a.ts 和 b.ts 文件中，我们就可以更好的避免循环依赖的问题了。
3. 紧缩代码
在一些项目中，我们可能会在某些模块中仅仅使用了模块导出的类型，而没有使用模块导出的具体变量或者函数。这时候，我们可以使用 import type 来只导入类型，从而避免在项目打包过程中把全部导出的变量都打包进库的问题，从而起到了紧缩代码的作用。
4. 类型别名声明
当我们在全局作用域下声明了某个类型的别名之后，我们可以使用 import type 来把这个类型别名导入到我们的模块中。
-- -------------------- ---- -------
-- -----------
------- ---- -------- - -------
-- ----
------ ---- - -------- - ---- -----------
------ -------- ----------------- --------- -
------------------- -------------
-这里，我们通过 import type 的方式把 global.d.ts 中的类型 Greeting 导入到了 a.ts 中，用来给 sayHello() 函数的参数做约束。
总结
在很多情况下， import type 可以帮助我们更好的创建和使用类型，避免循环依赖问题，提高代码的可读性和编写效率。因此，在使用 TypeScript 的过程中，建议适当地利用 import type，来让我们的代码更加优雅、简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed710ff6b2d6eab379abc5