Implementando o Observer Design Pattern no TypeScript

Implementando o Observer Design Pattern no TypeScript

Um padrão de projeto é um modelo que resolve um problema recorrente no projeto de software.





O padrão observador, também conhecido como padrão de publicação-assinatura, é um padrão comportamental. Ele permite que você notifique vários objetos ou assinantes sobre qualquer evento publicado no objeto que eles estão observando.





MAKEUSEO VÍDEO DO DIA

Aqui você aprenderá como implementar o padrão de design do observador no TypeScript.





O padrão do observador

O padrão observador funciona definindo um relacionamento um-para-muitos entre o publicador e seus assinantes. Quando ocorrer um evento no editor, ele notificará todos os assinantes desse evento. Um exemplo generalizado desse padrão é Ouvintes de eventos JavaScript .

Para contextualizar, suponha que você esteja criando um rastreador de estoque que acompanhe o número de produtos em sua loja. Nesse caso, sua loja é o assunto/editor e seu inventário é o observador/assinante. Usar o padrão de projeto do observador seria ideal nessa situação.



No padrão de design do observador, sua classe de assunto deve implementar três métodos:

  • Um anexar método. Este método adiciona um observador ao assunto.
  • UMA separar método. Este método remove um observador de um assunto.
  • UMA notificar/atualizar método. Este método notifica os observadores do sujeito quando o estado muda no sujeito.

Sua classe observadora deve implementar um método, o atualizar método. Este método reage quando há uma mudança no estado do sujeito.





Implementando as classes Subject e Observer

O primeiro passo para implementar esse padrão é criar interfaces para a classe subject e Observer, para garantir que implementem os métodos corretos:

// Subject/Publisher Interface 
interface Subject {
attachObserver(observer: Observer): void;
detachObserver(observer: Observer): void;
notifyObserver(): void;
}

// Observer/Subscriber Interface
interface Observer {
update(subject: Subject): void;
}

As interfaces no bloco de código acima definem os métodos que suas classes concretas devem implementar.





Uma aula de assunto concreto

O próximo passo é implementar uma classe de assunto concreta que implemente o Sujeito interface:

// Subject 
class Store implements Subject {}

A seguir, inicialize o Sujeito o estado de Armazenar classe. Os observadores do sujeito reagirão a mudanças nesse estado.

Nesse caso, o estado é um número e os observadores reagirão a um aumento no número:

// Subject state 
private numberOfProducts: number;

Em seguida, inicialize uma matriz de observadores. Esta matriz é como você acompanhará os observadores:

pegar app de sinal de câmera sem fio
// initializing observers 
private observers: Observer[] = [];