TypeScript 三巨头：type、interface、record，到底谁是谁？-优快云博客

TypeScript 三巨头：type、interface、record，到底谁是谁？

你有没有在写 TS 时懵过：

“这个对象，我该用 type 还是 interface？”
“Record 又是个啥？听起来像录音笔……”

别急，今天咱们就来给这三个“长得像、用起来又不一样”的家伙，做个“相亲式”介绍。

准备好了吗？
欢迎来到——TypeScript 家族茶话会！

🧑‍💼 1. `interface` —— “家族族长”，正经、可继承

interface 是 TypeScript 的“老派贵族”，一出场就自带“正经”光环。

✅ 它适合用来定义：

对象的结构（比如用户信息、API 返回值）
类的契约（class User implements IUser）
还能被继承、合并，像个大家族的族谱。

🌰 举个栗子：

interface User {
  name: string;
  age: number;
}

interface VIPUser extends User {
  level: 'gold' | 'platinum';
}

💡 小知识：
interface 支持“声明合并”——
你可以在不同文件里写同名 interface，TS 会自动把它们“拼”起来。
（家族越大，人越多，热闹！）

🧑‍🔬 2. `type` —— “自由科学家”，啥都能造

type 是个“自由派”，不拘一格，能干很多 interface 干不了的事。

✅ 它能定义：

对象（和 interface 差不多）
联合类型（string | number）
交叉类型（User & Admin）
映射类型、条件类型……（高阶玩法）

🌰 举个栗子：

type ID = string | number;
type Status = 'active' | 'inactive' | 'banned';

type User = {
  id: ID;
  status: Status;
};

type VIPUser = User & { level: 'gold' };

⚠️ 注意：
type 不能被继承或合并，它一旦定义，就是“终版”。

✅ 优势：更灵活，适合复杂类型组合。

🧑‍🚀 3. `Record` —— “键值管家”，专管“字典类”数据

Record 不是独立的类型关键字，而是 TS 内置的一个工具类型。
它专门用来定义“键是字符串，值有统一类型”的对象——比如配置表、状态映射。

✅ 一句话：

Record<K, T> = 所有 key 属于 K，value 属于 T 的对象。

🌰 举个栗子：

你想存一堆用户的年龄：

const userAges: Record<string, number> = {
  张三: 25,
  李四: 30,
  王五: 28
};

等价于：

const userAges: { [key: string]: number } = { ... };

但 Record 更简洁、更语义化！

🌟 高级用法：

type Role = 'admin' | 'user' | 'guest';
const permissions: Record<Role, string[]> = {
  admin: ['read', 'write', 'delete'],
  user:  ['read', 'write'],
  guest: ['read']
};

✅ Record 是 type 的好帮手，专治“键值对混乱症”。

🤔 那我到底该用谁？

场景	推荐用
定义对象，未来可能被扩展/继承	`interface` 👑
定义联合、交叉、复杂类型	`type` 🧪
存一堆“key-value”数据（如配置、映射）	`Record<key, value>` 📚
普通对象，无特殊需求	`interface` 或 `type` 都行，看团队习惯

💬 业内小共识：

React 项目偏爱 type（灵活）
大型系统偏爱 interface（可扩展）
Record 用在“字典场景”时，代码更清晰

✨ 写在最后

总结一下：

interface：家族族长，规矩多但可传承
type：自由科学家，啥都能造，但不许改
Record：键值管家，专管“名字+数据”类对象

它们不是对手，而是TypeScript 工具箱里的三把好钳子——
用对地方，代码才更优雅。

下次写 TS 时，别再纠结了：
问问自己——
“我是要建个家族？还是要造个火箭？还是只是想存个配置？”

答案自然就出来了！

📎 小抄速记：

interface User { name: string }           // 对象，可继承
type ID = string | number;                // 联合类型，灵活
const config: Record<string, number> = {}; // 键值对，清晰