TypeScriptimport-type使用教程

TypeScript 的 `import type` 是自 3.8 版本起引入的关键特性，专为“仅导入类型定义、零运行时开销”而生——它在编译时被彻底擦除，不生成任何 JavaScript 代码，从根本上杜绝了因误导类型而导致的意外模块执行与依赖污染；本文深入剖析其适用场景（如接口、类型别名、泛型约束等纯类型引用）、与普通 `import` 的本质区别、编译器自动识别机制及最佳实践配置（如 `importsNotUsedAsValues: "error"`），并直击常见误区（如 enum 和默认导出的特殊处理），助你写出更精准、高效且可维护的类型安全代码。

import type 是 TypeScript 3.8 引入的语法，用于只导入类型定义，不生成任何运行时代码。它解决的是“类型仅用于编译检查，却意外导致模块被引入执行”的问题。

什么时候该用 import type？

当你只用到了某个模块导出的接口、类型别名、类（作为类型）、泛型参数约束等，而完全没用到它的值（如函数、变量、类实例）时，就应该优先使用 import type。

• 导入 interface User 或 type Status = 'active' | 'inactive'
• 用作函数参数或返回值的类型注解：比如 function logUser(u: User)
• 在 typeof、keyof、泛型约束中引用外部类型

import type 和普通 import 的区别

普通 import 在编译后可能保留为 require 或 import 语句，参与模块依赖和执行；而 import type 在编译阶段就被完全擦除，不会出现在输出的 JavaScript 中。

• ✅ 正确（纯类型）：import type { ApiResponse } from './api';
• ❌ 错误（混用值与类型）：import type { ApiResponse, fetchUser } from './api'; —— fetchUser 是值，不能用 import type
• ✅ 拆开写：import type { ApiResponse } from './api'; import { fetchUser } from './api';

自动转换与编译器支持

TypeScript 编译器（tsc）会自动识别“仅类型导入”，即使你写了普通 import，只要导入的全是类型且 importsNotUsedAsValues 设为 "error" 或 "preserve"，它也可能报错或建议改用 import type。

• 推荐在 tsconfig.json 中启用："importsNotUsedAsValues": "error"，强制区分
• 搭配 "isolatedModules": true（尤其在 Babel 或 Vite 环境下）更安全
• VS Code 和主流编辑器能正确识别并提供补全、跳转

常见误区与注意事项

import type 不是万能的，有些场景它不适用或需额外处理：

• 不能导入 enum（除非开启 preserveConstEnums 且 enum 未被计算）——因为 enum 默认是值，即使只当类型用也生成 JS
• 不能导入 class 并用作构造函数（即 new MyClass()），但可用作类型（let x: MyClass）
• 默认导出类型要加括号：import type MyType from './MyType';（不是 import type { default as MyType }）
• 配合 export type 使用更清晰：目标模块可显式只导出类型，避免消费者误引值

本篇关于《TypeScriptimport-type使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！