https://github.com/showrin/design-pattern
A test on different design patterns
https://github.com/showrin/design-pattern
design-patterns javascript oop typescript
Last synced: 5 days ago
JSON representation
A test on different design patterns
- Host: GitHub
- URL: https://github.com/showrin/design-pattern
- Owner: Showrin
- License: mit
- Created: 2020-08-23T18:14:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-25T15:12:38.000Z (over 5 years ago)
- Last Synced: 2025-01-19T20:57:47.052Z (over 1 year ago)
- Topics: design-patterns, javascript, oop, typescript
- Language: TypeScript
- Homepage: https://github.com/Showrin/design-pattern#design-pattern
- Size: 21.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# design-pattern
A test on different design patterns
## Project Setup
First install **`Typescript`** globally.
```
$ npm i -g typescript
```
Clone the repo. To do so, go to the directory where you want to keep this repo. Then open the terminal from here and run the following command.
```
$ git clone git@github.com:Showrin/design-pattern.git
```
Then navigate to the repository using this command.
```
$ cd design-pattern
```
After cloning, if you are using **`yarn`**, install the required modules by running the following command.
```
$ yarn
```
Or use the following command if you are using **`npm`**.
```
$ npm install
```
Then run the following command and you will get products that are created using different design patterns.
```
$ yarn start
```
or
```
$ npm start
```
### Console Output
## Dev Dependencies
This program has following development dependencies.
| Module Name | Version | Why it's used |
| --------------------- | ------- | -------------------------------------------------------- |
| @types/node | ^14.6.0 | It's being used for using `require` syntax in typescript |
| chalk | ^4.1.0 | It's being used for giving colors to console texts |
| console-table-printer | ^2.3.17 | It's being used for printing data in console as a table |
## Procedure: Factory Design Pattern
> **By analayzing the given interface, it seems to be following the Factory Design Pattern. Here's the procedure of creating `Car` and `Plane` class, using this design pattern.**
First, the interface for `Vehicle` is implemented.
```
interface Vehicle {
set_num_of_wheels(): number;
set_num_of_passengers(): number;
has_gas(): boolean;
}
```
Then, `Car` and `Plane` classes are implemented using the `Vehicle` interface.
```
class Car implements Vehicle {
set_num_of_wheels() {
return 4;
}
set_num_of_passengers() {
return 4;
}
has_gas() {
return true;
}
}
```
```
class Plane implements Vehicle {
set_num_of_wheels() {
return 14;
}
set_num_of_passengers() {
return 100;
}
has_gas() {
return false;
}
}
```
Then, the `VehicleFactory` class is implemented **that defines which vehicle should be created**.
```
class VehicleFactory {
getCar(): Car {
return new Car();
}
getPlane(): Plane {
return new Plane();
}
}
```
And now, it's time to create `Car` and `Plane` from the Factory Design Pattern.
```
import { Table } from "console-table-printer";
const chalk = require("chalk");
const vehicleFactory: VehicleFactory = new VehicleFactory();
const ourCar: Car = vehicleFactory.getCar();
const ourPlane: Plane = vehicleFactory.getPlane();
const table = new Table();
table.addRow(
{
Product: "Car",
set_num_of_wheels: ourCar.set_num_of_wheels(),
set_num_of_passengers: ourCar.set_num_of_passengers(),
has_gas: ourCar.has_gas(),
},
{ color: "red" }
);
table.addRow(
{
Product: "Plane",
set_num_of_wheels: ourPlane.set_num_of_wheels(),
set_num_of_passengers: ourPlane.set_num_of_passengers(),
has_gas: ourPlane.has_gas(),
},
{ color: "green" }
);
console.log(
chalk.bold.red(
"\n### These products are created using [" +
chalk.underline("Factory Pattern") +
"] ###"
)
);
table.printTable();
```
### Output
## Procedure: Abstract Factory Design Pattern
> **`Car` and `Plane` class can be also created using Abstract Factory Design Pattern. Here's the procedure of creating `Car` and `Plane` class, using this design pattern.**
First, interfaces for `VehicleFactory`, `Car` & `Plane` are implemented.
```
interface VehicleFactoryInterface {
createCar(): Car;
createPlane(): Plane;
}
```
```
interface CarInterface {
set_num_of_wheels(): number;
set_num_of_passengers(): number;
has_gas(): boolean;
}
```
```
interface PlaneInterface {
set_num_of_wheels(): number;
set_num_of_passengers(): number;
has_gas(): boolean;
}
```
Then, `Car` and `Plane` classes are implemented.
```
class Car implements CarInterface {
set_num_of_wheels() {
return 4;
}
set_num_of_passengers() {
return 4;
}
has_gas() {
return true;
}
}
```
```
class Plane implements PlaneInterface {
set_num_of_wheels() {
return 14;
}
set_num_of_passengers() {
return 100;
}
has_gas() {
return false;
}
}
```
After that, the `VehicleFactory` class is implemented and it decides which class should be created.
```
class VehicleFactory implements VehicleFactoryInterface {
createCar(): Car {
return new Car();
}
createPlane(): Plane {
return new Plane();
}
}
```
And now, it's time to create `Car` and `Plane` from the Abstract Factory Design Pattern.
```
import { Table } from "console-table-printer";
const chalk = require("chalk");
const vehicleFactory: VehicleFactory = new VehicleFactory();
const ourCar: Car = vehicleFactory.createCar();
const ourPlane: Plane = vehicleFactory.createPlane();
const table = new Table();
table.addRow(
{
Product: "Car",
set_num_of_wheels: ourCar.set_num_of_wheels(),
set_num_of_passengers: ourCar.set_num_of_passengers(),
has_gas: ourCar.has_gas(),
},
{ color: "red" }
);
table.addRow(
{
Product: "Plane",
set_num_of_wheels: ourPlane.set_num_of_wheels(),
set_num_of_passengers: ourPlane.set_num_of_passengers(),
has_gas: ourPlane.has_gas(),
},
{ color: "green" }
);
console.log(
chalk.bold.red(
"\n### These products are created using [" +
chalk.underline("Abstract Factory Pattern") +
"] ###"
)
);
table.printTable();
```
### Output
> **Actually, `Abstract Factory Pattern` is similar to `Factory Pattern`. The difference is that all products have different interfaces in this design pattern.**
## License
[MIT](https://choosealicense.com/licenses/mit/)