TypeScript 如何做类型导入

在前端开发里，代码越复杂，越容易出现“谁都看不懂的变量”。比如你写了个函数处理用户信息，同事调用时，可能传了个年龄字符串而不是数字，结果bug藏半天。这时候类型检查就能帮上大忙，而TypeScript（简称TS）的类型导入，就是让类型复用变简单的关键步骤。

先搞懂：什么是“类型导入”？

你可以把类型导入理解成“借别人的规格表”。比如你要做家具，自己画了个桌子的尺寸表，同事要做椅子，不用再重新画一遍桌子的尺寸，直接“导入”你的规格就行。TS里的类型导入，就是把其他文件里定义的类型，借过来用在自己的代码里，不用重复写，还能保证类型统一。

举个生活化的例子：你做了个“水果规格表”，上面写了苹果是红色、圆形，重量100-200克；香蕉是黄色、长条形，重量120-250克。下次要做水果沙拉，要检查买的水果对不对，不用再重新定义苹果的属性，直接导入这个规格表就行。

最常用的：导入单个类型

TS导入类型的语法和导入变量有点像，不过要加个type前缀，这样TS才知道你要导入的是类型，不是普通变量。

比如你在fruit.ts里定义了水果的类型：

`typescript

// fruit.ts

type Fruit = {

name: string;

color: string;

weight: number;

}

`

现在你要在另一个文件salad.ts里用这个类型，就可以这样写：

`typescript

// salad.ts

import type { Fruit } from './fruit';

function makeFruitSalad(fruits: Fruit[]) {

return fruits.map(f => f.name).join(', ');

}

`

这样makeFruitSalad函数里的fruits参数，就只能是符合Fruit类型的数组，要是传了个蔬菜进去，TS直接报错，不用等运行才发现问题。

导入多个类型：一次性借全规格表

有时候你不止要水果的类型，还要蔬菜、零食的类型，总不能每次只导一个吧？这时候可以一次性导入多个类型。

还是刚才的fruit.ts，再加上蔬菜的类型：

`typescript

// fruit.ts

type Fruit = { name: string; color: string; weight: number; }

type Vegetable = { name: string; isGreen: boolean; }

`

在salad.ts里就可以一次性导入两个类型：

`typescript

// salad.ts

import type { Fruit, Vegetable } from './fruit';

function mixIngredients(a: Fruit, b: Vegetable) {

return ${a.name}和${b.name}混合;

}

`

这样你就不用分开写两次导入，一次导完所有需要的类型，代码更简洁。

小细节：什么时候用“导入类型”？

很多新手会问，我直接用import { Fruit }行不行？也行，但可能会有问题——如果fruit.ts里除了类型，还有一个叫Fruit的变量，TS会分不清你要导入的是类型还是变量，这时候加type就更明确。而且，现代前端工具打包时，import type导入的类型不会被打包到最终代码里，能减少体积，相当于“只借规格，不借实物”，更高效。

还有个偷懒的小技巧：如果你的文件里只有类型，没有变量，也可以直接用import，TS会自动把它当成类型导入，不过建议还是加type，代码可读性更强，团队里的人一眼就知道这是类型相关的。

总结

TS的类型导入，本质是让类型复用更方便，避免重复写规格，减少bug。从单个类型导入，到多个类型一次性导入，再到注意语法细节，都是为了让你的前端代码更清晰、更可靠。下次写TS时，遇到要复用的类型，记得用import type，就像借规格表一样，既省心又准确。