别再死记硬背了！用几个真实场景帮你彻底搞懂TypeScript的interface和type
刚接触TypeScript时，面对interface和type这两个看似相似的概念，很多人会陷入"该用哪个"的纠结。与其死记硬背语法区别，不如通过几个真实开发场景，看看它们在实际项目中如何各显神通。
1. 定义API响应类型：从基础到复杂
假设我们需要处理一个用户管理系统的API响应，基础用户数据包含name和age字段。先用interface实现：
interface User { name: string; age: number; }当API升级，返回的数据增加了email可选字段时，interface可以直接扩展：
interface User { email?: string; }现在改用type实现相同功能：
type User = { name: string; age: number; email?: string; };关键差异：
interface支持声明合并（自动合并同名声明）type需要一次性定义完整结构
当响应数据需要包含多种可能形态时，type的联合类型优势就显现了：
type APIResponse = | { status: 'success'; data: User } | { status: 'error'; message: string };2. 构建表单验证系统：可复用类型设计
开发一个注册表单，需要验证用户名、密码和确认密码。先用interface定义验证规则：
interface ValidationRule { required?: boolean; minLength?: number; pattern?: RegExp; } interface FormRules { username: ValidationRule; password: ValidationRule; confirmPassword: ValidationRule & { matchWith: string; // 需要与password字段匹配 }; }同样的功能用type实现，可以利用交叉类型：
type ValidationRule = { required?: boolean; minLength?: number; pattern?: RegExp; }; type ConfirmPasswordRule = ValidationRule & { matchWith: string; }; type FormRules = { username: ValidationRule; password: ValidationRule; confirmPassword: ConfirmPasswordRule; };实用技巧：
- 复杂验证规则适合用
type的交叉类型组合 - 基础验证规则用
interface更易读 - 实际项目中可以混合使用两者
3. 工具函数库的类型声明：高级类型技巧
开发一个工具库时，常需要处理各种输入输出类型。比如一个maybe函数，可以安全地访问嵌套对象属性：
type Maybe<T> = T | null | undefined; function getSafe<T, K extends keyof T>(obj: Maybe<T>, key: K): Maybe<T[K]> { return obj?.[key]; }当需要定义函数重载时，interface的表现更优雅：
interface StringUtils { // 重载1：传入字符串数组 join(separator: string, parts: string[]): string; // 重载2：传入多个字符串参数 join(separator: string, ...parts: string[]): string; } const join: StringUtils['join'] = (separator: string, ...args: any[]) => { const parts = Array.isArray(args[0]) ? args[0] : args; return parts.join(separator); };性能考虑：
- 大型项目中使用
interface可能有更好的编译性能 - 复杂类型操作（如条件类型）必须使用
type
4. 组件Props设计：React中的最佳实践
在React组件开发中，Props的类型定义尤为关键。一个按钮组件可能有多种变体：
type ButtonSize = 'small' | 'medium' | 'large'; type ButtonVariant = 'primary' | 'secondary' | 'ghost'; interface BaseButtonProps { children: React.ReactNode; className?: string; onClick?: () => void; } type ButtonProps = BaseButtonProps & { size?: ButtonSize; variant?: ButtonVariant; loading?: boolean; };当需要扩展第三方组件时，interface的继承特性非常有用：
import { ButtonProps as AntdButtonProps } from 'antd'; interface MyButtonProps extends AntdButtonProps { customProp?: string; // 可以覆盖原有类型 size?: 'xs' | ButtonSize; }团队规范建议：
- 对象形状优先使用
interface - 联合类型、元组类型使用
type - 保持团队内部一致性比选择哪种更重要
