面试题：TypeScript类与接口结合在大型项目架构中的设计模式应用

Question

在一个大型前端项目架构中，我们需要设计一系列可复用的组件。请基于TypeScript的类与接口结合，设计一个符合依赖倒置原则的架构示例。其中，要有抽象的接口定义组件的核心行为，多个具体的类实现这些接口，并且通过控制反转（IoC）容器来管理组件的依赖注入。描述整体的设计思路、关键代码结构以及如何通过这种设计提高项目的可维护性和可扩展性。

Answer 1

设计思路

1. 抽象接口定义核心行为：定义接口来描述组件的核心功能，这样具体类依赖于这些抽象接口而非具体实现，实现依赖倒置。
2. 具体类实现接口：创建多个具体的类实现上述定义的接口，不同具体类可提供不同的功能实现。
3. IoC 容器管理依赖注入：使用 IoC 容器来负责创建对象实例以及管理它们之间的依赖关系，通过容器注入依赖，使组件之间的耦合度降低。

关键代码结构

1. 定义接口

// 定义一个抽象接口
interface IComponent {
    performAction(): void;
}

2. 具体类实现接口

// 具体类 A 实现 IComponent 接口
class ComponentA implements IComponent {
    performAction(): void {
        console.log('ComponentA is performing action');
    }
}

// 具体类 B 实现 IComponent 接口
class ComponentB implements IComponent {
    performAction(): void {
        console.log('ComponentB is performing action');
    }
}

3. 使用 IoC 容器管理依赖注入 这里以 inversify - js 为例（一个流行的 IoC 容器库）：

import { Container, injectable } from 'inversify';

// 使用 inversify 定义具体类为可注入
@injectable()
class ComponentA implements IComponent {
    performAction(): void {
        console.log('ComponentA is performing action');
    }
}

@injectable()
class ComponentB implements IComponent {
    performAction(): void {
        console.log('ComponentB is performing action');
    }
}

// 创建容器实例
const container = new Container();

// 绑定接口到具体实现
container.bind<IComponent>('IComponent').to(ComponentA);

// 获取实例并调用方法
const component = container.get<IComponent>('IComponent');
component.performAction();

提高项目可维护性和可扩展性

1. 可维护性：
   • 降低耦合：组件之间通过抽象接口进行交互，而非直接依赖具体类，当具体实现发生变化时，只需修改实现类代码，不影响依赖它的其他组件，降低维护成本。
   • 清晰结构：接口和具体类的分离使得代码结构更清晰，易于理解和修改。
2. 可扩展性：
   • 易于添加新实现：若需要添加新的组件功能，只需创建一个新的类实现抽象接口，然后通过 IoC 容器进行绑定，无需修改大量现有代码。
   • 灵活替换实现：在 IoC 容器中可以方便地切换具体实现，例如从 ComponentA 切换到 ComponentB，以满足不同场景需求，增强了系统的灵活性和扩展性。