TypeScript接口interface的高级用法详解

mindmap
  root(TypeScript接口高级应用)
    基础强化
      可选属性
      只读属性
      函数类型
    高级类型
      索引签名
      继承与合并
      泛型约束
    设计模式
      策略模式
      工厂模式
      适配器模式
    工程实践
      声明合并
      类型守卫
      装饰器集成

interface Point {
  x: number;
  y: number;
}

class Point3D {
  x = 0;
  y = 0;
  z = 0;
}

const p: Point = new Point3D(); // 兼容成功

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 = {} // 错误：只读属性

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

// user.d.ts
interface User {
  name: string;
}

// user-profile.d.ts
interface User {
  age: number;
  email?: string;
}

// 最终合并结果
const user: User = {
  name: 'Bob',
  age: 30
};

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

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

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

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

// a.ts
import type { B } from './b';

export interface A {
  b: B;
}

// b.ts
import type { A } from './a';

export interface B {
  a: A;
}

interface AppConfig {
  apiEndpoint: string;
}

// 扩展配置
interface AppConfig {
  cacheTTL?: number;
  featureFlags?: Record<string, boolean>;
}

const config: AppConfig = {
  apiEndpoint: 'https://api.example.com',
  featureFlags: { newUI: true }
};