TypeScript 中 import type 与 import 的区别：运行时行为解析

背景

本周在处理代码时遇到一个令人困惑的现象：需要依据某个枚举（enum）的具体取值来执行后续的业务逻辑。

首先定义该枚举如下：

export enum MyEnum {
  DEFAULT = 0,
  SOME_VALUE = 1,
  SOME_OTHER_VALUE = 2,
}

随后在另一个项目中，尝试使用 import type 语句将其引入：

import type { MyEnum } from 'somepackage';

const someFunction = (myEnum: MyEnum) => {
  if (myEnum === MyEnum.SOME_VALUE) {
  	// some logic here
    return
  }
  if (myEnum === MyEnum.SOME_OTHER_VALUE) {
    // some logic here
    return
  }
  // some logic here
  return
}

此时，VS Code 编辑器抛出了编译错误提示：

'MyEnum' cannot be used as a value because it was imported using 'import type'.ts(1361)

起初我认为这不合常理，TypeScript 理应支持对枚举值的判断。

经过排查，按照错误提示的指引，将 import type 替换为普通的 import 后，问题得以解决。

import type 与 import 的差异

此前我对 TypeScript 的使用多停留在模仿项目现有代码的层面，缺乏深入原理的学习。

这次经历再次印证了这一点：看到项目中他人使用 import type，我便直接将其用于引入 MyEnum，结果却行不通，必须将枚举单独使用 import 引入。

为了解开疑惑，我查阅了相关资料，最终理清了原因。根据 TypeScript 3.8 的官方文档说明：

import type only imports declarations to be used for type annotations and declarations. It always gets fully erased, so there’s no remnant of it at runtime.

这句话的核心含义是：import type 仅用于引入供类型注解和声明使用的标识符，它在编译后会被完全擦除，因此在运行时环境中不存在任何残留。

至此，之前枚举报错的原因便清晰了：若通过 import type 引入 MyEnum，虽然在构建阶段能完成类型检查，但由于该枚举在运行时已被擦除，自然无法执行如 MyEnum.SOME_VALUE 这样的值判断操作。

然而，既然 TypeScript 本身的设计初衷就是在编译期工作，运行时不应存在类型信息，那么引入 import type 的意义何在？

原因在于，在极少数特定场景下（枚举即为典型代表），import 引入的内容在运行时确实会保留。此时，使用 import type 与 import 会产生实质性的行为差异。

使用 import type 的优势

import type 功能自 TypeScript 3.8 版本引入，其存在的必要性及相较于普通 import 的优势体现在何处？

概括而言，在绝大多数常规场景中，使用普通的 import 足以满足需求。但在某些较为罕见的边界情况下，若不使用 import type 可能会引发问题，此时该语法能有效地规避风险。

尽管我本人尚未遇到过此类具体报错，但观察到所在项目中，所有涉及 TypeScript 类型引入的地方均规范使用了 import type。遵循这一约定显然更为稳妥，且没有任何负面影响。

参考链接

Do I need to use the “import type” feature of TypeScript 3.8 if all of my imports are from my own file?

Runtime typesafety in typescript

总结

以上就是关于 TypeScript 中 import type 与 import 区别的详细解析，更多相关 TS import type 与 import 区别内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！