TypeScript import type 怎么用
平时写JavaScript时，你肯定见过很多这种情况：一个接口只是用来约束函数参数的格式，或者一个类型只是用来定义返回值的结构，结果不小心把它当成了普通变量导入，最后打包时还会多出没用的代码，甚至偶尔触发奇怪的类型报错。这种糟心事，用TypeScript里的import type就能轻松解决，我们用几个生活化的例子慢慢说。
先搞懂普通import和import type的区别
先从大家熟悉的普通import说起：比如你做奶茶店的小程序，写了一个做奶茶的函数makeMilkTea，需要导入一个叫TeaIngredient的配料类型来约束参数，你可能会写成：
`typescript
// 普通导入，同时导入了类型和函数
import { makeMilkTea, TeaIngredient } from './奶茶工具'
`
但TeaIngredient只是个类型，不会变成实际运行的JS代码，普通导入它的话，打包工具（比如Vite、Webpack）会把它当成没用的代码，要么直接删掉，要么偶尔因为打包规则报错。
import type就是专门解决这个问题的：它告诉TypeScript和打包工具，我导入的只是个类型，不用管它，只会在编译时用，不会出现在最终的JS代码里。同样是刚才的奶茶例子，改写成这样就对了：
`typescript
// 只导入类型，不会出现在最终代码里
import type { TeaIngredient } from './奶茶工具'
import { makeMilkTea } from './奶茶工具'
`
这么用的好处很实在：一是打包后的代码更小，没有冗余；二是不会因为导入了不存在于运行时的东西，触发各种奇怪的错误。
什么时候必须用import type？
其实不止是怕冗余，有些场景下不用import type会直接报错，举两个最常见的例子。
第一个场景：导入的东西只用来做类型注解，不做实际调用。比如你写了一个统计点单的函数，返回值是一个类型，用来给变量定类型：
`typescript
// 定义点单统计函数
import { getOrderCount } from './订单工具'
// 这里的OrderCount只是用来定orderStats的类型，不会被调用
import type { OrderCount } from './订单工具'
const orderStats: OrderCount = getOrderCount()
`
如果这里不用import type导入OrderCount，就会报错，因为这个类型根本不存在于运行时的JS代码里，普通import会以为你要导入一个函数或变量，但实际上根本没写这个东西，自然就炸了。
第二个场景：在JSX里用类型约束。比如你写了一个React组件，用TSX语法，想给组件的props加类型，这时候导入的props类型必须用import type：
`tsx
import React from 'react'
// 给组件的props用类型，必须用import type
import type { MilkTeaProps } from './奶茶组件'
const MilkTeaCard: React.FC<MilkTeaProps> = ({ name, price }) => {
return <div>{name}：{price}元</div>
}
`
要是不用import type，TS会把这个类型当成普通值，在JSX里识别不了，组件就会报类型错误，导致页面渲染不出来。
高级用法：批量导入和默认导入的坑
有时候需要批量导入一堆类型，比如你要导入订单、用户、商品三个类型，这时候可以用import type的批量写法，比一个个写省事儿：
`typescript
// 批量导入多个类型
import type { Order, User, Product } from './数据类型'
`
要注意的是，import type不能用来导入默认类型。比如你写了一个默认导出的类型：
`typescript
// 错误写法：默认类型不能用import type
import type Order from './数据类型'
// 正确写法：普通导入，因为是默认导出的类型
import Order from './数据类型'
`
要是非要用import type，可以用命名导入的方式：
`typescript
// 正确的默认类型导入写法
import type { default as Order } from './数据类型'
`
最后再划个简单的使用口诀
不用记复杂规则，记住两个小要点就行：一是只做类型注解、不实际调用的导入，都用import type；二是批量导入多个类型时用import type，避免冗余代码。
只要别用import混导类型和函数，就能避开大部分类型报错和打包冗余的问题，写TS的效率会高很多。