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 接口与类型别名对比

二、接口高级类型技巧

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
};

合并规则优先级：

1. 同名字段类型必须兼容
2. 函数类型重载顺序保持声明顺序
3. 字符串索引签名影响其他属性

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 接口性能影响测试

六、最佳实践与避坑指南

6.1 接口设计原则

1. 单一职责原则：每个接口聚焦一个功能领域
2. 开闭原则：通过扩展而非修改实现变化
3. 里氏替换：子类型必须能替换基类型
4. 接口隔离：避免臃肿接口

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 }
};

快，让 我 们 一 起 去 点 赞 ！！！！