TypeScript接口 interface 高级用法完全解析
TypeScript接口 interface 高级用法完全解析https://i-blog.csdnimg.cn/direct/794a11956ff049c2bc0cb616644d69a6.png
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 {
: {
data: unknown;
expire: Date;
};
}
const cache: CacheStore = {
user_1: {
data: { name: 'Alice' },
expire: new Date('2023-12-31')
}
};
映射类型应用：
type ReadonlyCache<T> = {
readonly : T;
}
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属性)12045复杂接口(嵌套对象)380120泛型接口21085声明合并接口15060 六、最佳实践与避坑指南
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 }
};
快，让 我 们 一 起 去 点 赞 ！！！！https://i-blog.csdnimg.cn/direct/410282f15ee24776a40c1a83e6afd896.webp
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]