TypeScript接口 interface 高级用法完全解析
TypeScript接口 interface 高级用法完全解析
mindmap
root(TypeScript接口高级应用)
基础强化
可选属性
只读属性
函数类型
高级类型
索引签名
继承与合并
泛型约束
设计模式
策略模式
工厂模式
适配器模式
工程实践
声明合并
类型守卫
装饰器集成
一、接口核心机制深度解析
1.1 类型兼容性原理
结构化类型系统示例:
interface Point {
x: number;
y: number;
}
class Point3D {
x = 0;
y = 0;
z = 0;
}
const p: Point = new Point3D(); // 兼容成功
1.2 接口与类型别名对比
特性 | 接口(interface) | 类型别名(type) |
---|---|---|
声明合并 | ✅ | ❌ |
扩展方式 | extends | & 交叉类型 |
实现约束 | ✅ | ❌ |
递归定义 | ✅ | ✅ |
性能优化 | 编译期优化 | 可能影响推断速度 |
二、接口高级类型技巧
2.1 索引签名与映射类型
动态属性定义:
interface CacheStore {
[key: string]: {
data: unknown;
expire: Date;
};
}
const cache: CacheStore = {
user_1: {
data: { name: 'Alice' },
expire: new Date('2023-12-31')
}
};
映射类型应用:
type ReadonlyCache<T> = {
readonly [P in keyof T]: T[P];
}
const readonlyData: ReadonlyCache<CacheStore> = cache;
// readonlyData.user_1 = {} // 错误:只读属性
2.2 泛型接口与条件类型
通用API响应接口:
interface ApiResponse<T = unknown> {
code: number;
data: T extends Error ? { message: string } : T;
timestamp: Date;
}
const successRes: ApiResponse<string> = {
code: 200,
data: "OK",
timestamp: new Date()
};
const errorRes: ApiResponse<Error> = {
code: 500,
data: { message: "Internal Error" },
timestamp: new Date()
};
三、接口工程化实践
3.1 声明合并进阶
合并不同来源的类型:
// user.d.ts
interface User {
name: string;
}
// user-profile.d.ts
interface User {
age: number;
email?: string;
}
// 最终合并结果
const user: User = {
name: 'Bob',
age: 30
};
合并规则优先级:
- 同名字段类型必须兼容
- 函数类型重载顺序保持声明顺序
- 字符串索引签名影响其他属性
3.2 接口与类的关系
classDiagram
class Animal {
+name: string
+move(distance: number): void
}
interface Flyable {
+fly(height: number): void
}
class Bird {
+fly(height: number): void
}
Animal <|-- Bird
Flyable <|.. Bird
实现多接口约束:
interface Swimmer {
swim(speed: number): void;
}
interface Flyer {
fly(height: number): void;
}
class Duck implements Swimmer, Flyer {
swim(speed: number) {
console.log(`Swimming at ${speed}km/h`);
}
fly(height: number) {
console.log(`Flying at ${height}m`);
}
}
四、接口设计模式实践
4.1 策略模式实现
interface PaymentStrategy {
pay(amount: number): void;
}
class CreditCardStrategy implements PaymentStrategy {
pay(amount: number) {
console.log(`Credit card支付: ${amount}元`);
}
}
class WeChatPayStrategy implements PaymentStrategy {
pay(amount: number) {
console.log(`微信支付: ${amount}元`);
}
}
class PaymentContext {
constructor(private strategy: PaymentStrategy) {}
executePayment(amount: number) {
this.strategy.pay(amount);
}
}
// 使用示例
const context = new PaymentContext(new WeChatPayStrategy());
context.executePayment(100);
4.2 抽象工厂模式
interface GUIFactory {
createButton(): Button;
createCheckbox(): Checkbox;
}
interface Button {
render(): void;
}
interface Checkbox {
toggle(): void;
}
class WindowsFactory implements GUIFactory {
createButton(): Button {
return new WindowsButton();
}
createCheckbox(): Checkbox {
return new WindowsCheckbox();
}
}
class MacOSFactory implements GUIFactory {
createButton(): Button {
return new MacOSButton();
}
createCheckbox(): Checkbox {
return new MacOSCheckbox();
}
}
五、性能优化与调试
5.1 类型守卫优化
interface Admin {
role: 'admin';
permissions: string[];
}
interface User {
role: 'user';
lastLogin: Date;
}
function checkAccess(user: Admin | User) {
if ('permissions' in user) {
// 类型收窄为Admin
console.log('Admin权限:', user.permissions);
} else {
console.log('最后登录:', user.lastLogin);
}
}
5.2 接口性能影响测试
接口复杂度 | 编译时间(ms) | 类型检查内存(MB) |
---|---|---|
简单接口(5属性) | 120 | 45 |
复杂接口(嵌套对象) | 380 | 120 |
泛型接口 | 210 | 85 |
声明合并接口 | 150 | 60 |
六、最佳实践与避坑指南
6.1 接口设计原则
- 单一职责原则:每个接口聚焦一个功能领域
- 开闭原则:通过扩展而非修改实现变化
- 里氏替换:子类型必须能替换基类型
- 接口隔离:避免臃肿接口
6.2 常见问题解决方案
问题1:循环依赖
解决方案:使用import type
// a.ts
import type { B } from './b';
export interface A {
b: B;
}
// b.ts
import type { A } from './a';
export interface B {
a: A;
}
问题2:动态扩展困难
解决方案:声明合并+可选属性
interface AppConfig {
apiEndpoint: string;
}
// 扩展配置
interface AppConfig {
cacheTTL?: number;
featureFlags?: Record<string, boolean>;
}
const config: AppConfig = {
apiEndpoint: 'https://api.example.com',
featureFlags: { newUI: true }
};
快,让 我 们 一 起 去 点 赞 !!!!