TypeScript 类型导入详解：import type 与 import {type}

一、引言

在 TypeScript 项目开发中，类型导入是日常高频操作。import type 与 import { type } 是两种主流的类型导入语法，二者看似功能相似，均可实现类型引入，但在语义定义、编译产物、运行时表现以及工程化最佳实践上，存在明显区别。

本文将从语法特性、编译原理、使用场景多维度，全面拆解两种导入方式的差异，帮助开发者规范 TS 类型导入写法。

1.1 基础语法定义

表格

语法格式	核心说明
`import type { Foo } from 'module'`	全局类型导入，整行语句仅用于引入类型，隔离运行时代码
`import { type Foo } from 'module'`	局部类型标记，在解构导入中，单独指定某一项为类型

1.2 基础编译差异

TypeScript 仅在编译阶段做类型校验，类型本身不参与运行时。

import type：编译器会直接移除整行导入语句，零运行时代码；
import { type }：支持一行代码混合导入类型与运行时值，仅删除标记为 type 的类型部分，普通值导入会完整保留。

typescript 复制代码

// 纯类型导入，编译后整行删除
import type { Foo } from './types';

// 混合导入，编译后仅保留 Bar 导入
import { type Foo, Bar } from './types';

二、深入解析：编译逻辑与运行时特性

2.1 类型导入核心本质

TS 属于静态类型约束，interface、type、类型别名等仅作用于编译阶段。一旦完成代码编译转换为 JavaScript，所有类型信息都会被清除。因此，合理区分类型导入，能够剔除冗余代码，减少打包体积，规避模块冗余加载问题。

2.2 import type 完整特性

仅允许导入纯类型：接口、类型别名、枚举类型、类型化类；
编译后无任何残留代码，完全脱离运行时；
适用于仅做类型注解、类型约束的场景。

typescript 复制代码

import type { User } from './user';

// 仅用作类型标注，无运行时依赖
function getUser(): User {
  return { id: 1, name: "Alice" };
}

2.3 import {type} 完整特性

支持类型 + 运行时值混合导入，语法灵活性更高；
同模块下，可同时引入变量、函数、类等可执行代码与类型；
编译时按需清除类型导入，保留业务运行依赖。

typescript 复制代码

// 混合导入：User 为类型，fetchUser 为可执行函数
import { type User, fetchUser } from './user';

async function getUser(): Promise<User> {
  return await fetchUser();
}

三、场景划分与最佳实践

3.1 优先使用 import type

当只需要引入类型，无需依赖模块中任何运行时值时，统一使用该语法。单一类型导入语义明确，代码可读性更强，同时杜绝无用依赖。

typescript 复制代码

import type { UserInfo, PageParams } from './typings';

3.2 优先使用 import {type}

当目标模块同时导出类型 + 业务逻辑代码，需要在同一文件同时引入时使用。无需拆分两次 import，精简代码结构。

typescript 复制代码

import { type UserInfo, createUser, deleteUser } from './user';

3.3 解决类型与值命名冲突

部分模块会存在同名类型与常量 / 对象的导出场景，两种语法可精准消除歧义：

typescript 复制代码

// 模块导出内容
export type User = { id: number; name: string };
export const User = { id: 0, name: "默认用户" };

// 精准导入类型
import type { User } from './user';
// 精准导入运行时值
import { User } from './user';

四、总结

import type 是整行级别的纯类型导入，编译后彻底清空，轻量化、无冗余，适合单纯类型引用；
import { type } 是细粒度局部类型标记，支持混合导入，适合类型与业务代码共存的模块；
大型项目中，规范类型导入语法，不仅能提升代码可维护性，还能优化打包性能、降低循环依赖风险；
合理运用两种语法，是中高级 TypeScript 开发者必备的编码规范，也是高质量工程化项目的基础要求。