当前位置：首页 > news >正文

interface和type

news 2025/10/18 16:51:19

在 TypeScript 中，interface 和 type 都用于定义自定义类型，但它们有一些重要的区别：

1. 基本语法

interface

interface User {name: string;age: number;
}interface Employee extends User {jobTitle: string;
}

type

type User = {name: string;age: number;
};type Employee = User & {jobTitle: string;
};

2. 主要区别

扩展方式

interface - 使用 extends

interface Animal {name: string;
}interface Dog extends Animal {breed: string;
}

type - 使用交叉类型 &

type Animal = {name: string;
};type Dog = Animal & {breed: string;
};

合并声明（声明合并）

interface - 支持自动合并

interface User {name: string;
}interface User {age: number;
}// 最终 User 包含 name 和 age
const user: User = {name: "John",age: 30
};

type - 不允许重复声明

type User = {name: string;
};// ❌ 错误：重复标识符 'User'
type User = {age: number;
};

适用场景

interface - 主要用于对象类型

interface Config {url: string;method: 'GET' | 'POST';
}

type - 更灵活，可用于各种类型

// 联合类型
type Status = 'success' | 'error' | 'loading';// 元组类型
type Point = [number, number];// 条件类型
type IsString<T> = T extends string ? true : false;// 映射类型
type Optional<T> = {[P in keyof T]?: T[P];
};

3. 实现功能对比

都支持的功能

// 两者都支持
interface UserInterface {name: string;age: number;
}type UserType = {name: string;age: number;
};// 函数类型
interface MathFunc {(x: number, y: number): number;
}type MathFuncType = (x: number, y: number) => number;// 索引签名
interface StringArray {[index: number]: string;
}type StringArrayType = {[index: number]: string;
};

4. 最佳实践建议

使用 interface 的情况：

定义对象形状，特别是需要声明合并时
类实现接口
库的类型定义（便于用户扩展）

// 类实现接口
interface Serializable {serialize(): string;
}class User implements Serializable {serialize() {return JSON.stringify(this);}
}

使用 type 的情况：

联合类型、交叉类型
元组类型
映射类型、条件类型
简单类型别名

// 联合类型
type ID = string | number;// 工具类型
type PartialUser = Partial<User>;// 元组
type Coordinates = [number, number];

5. 性能考虑

在大多数情况下，性能差异可以忽略不计。但：

interface 在大型代码库中可能有更好的性能表现
type 在复杂类型操作时可能稍慢

总结

特性	interface	type
声明合并	✅ 支持	❌ 不支持
扩展	`extends`	`&`
实现类	✅ 支持	✅ 支持
联合类型	❌ 不适合	✅ 适合
元组类型	❌ 不适合	✅ 适合
映射类型	❌ 不适合	✅ 适合