Принцип Dependency Inversion (DIP) из SOLID говорит, что модули верхнего уровня не должны зависеть от модулей нижнего уровня напрямую. Вместо этого оба должны зависеть от абстракций (например, интерфейсов). Абстракции не должны зависеть от деталей, а детали должны зависеть от абстракций.

Пример на фронтенде: допустим, у нас есть компонент, который отправляет данные на сервер. Вместо того, чтобы напрямую использовать конкретный HTTP-клиент, мы создаём интерфейс IDataSender и реализуем его разными способами (например, через fetch или axios). Компонент зависит от интерфейса, а не от конкретной реализации.

interface IDataSender {
  send(data: any): Promise<void>;
}

class FetchSender implements IDataSender {
  async send(data: any) {
    await fetch('/api', { method: 'POST', body: JSON.stringify(data) });
  }
}

class Component {
  constructor(private sender: IDataSender) {}

  async save(data: any) {
    await this.sender.send(data);
  }
}

// Использование
const sender = new FetchSender();
const component = new Component(sender);
component.save({ name: 'Test' });

Так мы можем менять реализацию отправки без изменения компонента, что облегчает тестирование и поддержку.

Расскажи про принцип Dependency Inversion (DIP) из SOLID на примере