Breaking News: Grepper is joining You.com. Read the official announcement!

ts Decorator pattern

barisx answered on May 6, 2022 Popularity 7/10 Helpfulness 3/10

answer ts Decorator pattern

ts Decorator pattern

Comment

/*Decorator
The Decorator pattern is a design pattern lets you dynamically change 
the behavior of an object at run time
and it's communly used in frameworks like Angular.

And you can implement the Decorator pattern in Typescript is very 
easy and you can use the decorator module.

Again imagine you want to make a pizza and you want to make it 
with tomato sauce, cheese and ham but you don't want to repeat the 
same steps for every pizza you make

First you need to make a pizza class:
*/
class Pizza {
  public makePizza() {
    console.log('Making a pizza...');
  }
}

// Then you make a decorator class that will decorate the pizza class:
class PizzaDecorator extends Pizza {
  constructor(public pizza: Pizza) {
    super();
  }

  public makePizza() {
    this.pizza.makePizza();
  }
}

// Then you make a concrete decorator class that extends the decorator class to add the cheese:
class CheeseDecorator extends PizzaDecorator {
  constructor(pizza: Pizza) {
    super(pizza);
  }

  public makePizza() {
    super.makePizza();
    console.log('Adding cheese...');
  }
}

// Then you make a concrete decorator class that extends the decorator 
// class to add the ham:
class HamDecorator extends PizzaDecorator {
  constructor(pizza: Pizza) {
    super(pizza);
  }

  public makePizza() {
    super.makePizza();
    console.log('Adding ham...');
  }
}

// Then you make a concrete decorator class that extends the decorator 
// class to add the mushrooms:
class MushroomDecorator extends PizzaDecorator {
  constructor(pizza: Pizza) {
    super(pizza);
  }

  public makePizza() {
    super.makePizza();
    console.log('Adding mushrooms...');
  }
}

// Then you make your pizza:
const pizza = new CheeseDecorator(new HamDecorator(new MushroomDecorator(new Pizza())));
pizza.makePizza();
// as you can see the decorator pattern uses nested classes and 
// inheritance to add new functionality to an object.

Popularity 7/10 Helpfulness 3/10 Language typescript

Source: dev.to

Tags: decorator typescript

Link to this answer
Share Copy Link

Contributed on May 06 2022

barisx

0 Answers Avg Quality 2/10

ts Decorator pattern

Contents

More Related Answers

ts Decorator pattern

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.