Inheritance Concept#
Let's illustrate the concept of inheritance with an example:
Suppose Zhang San wants to buy a car, and his father has a Mercedes-Benz. So his father gives him the car, which is called inheritance.
Concept of Decorators#
Suppose Zhang San already has a Mercedes-Benz, but he wants to change the wheels and the steering wheel. With the help of his brother, he replaces them with a new set.
Summary#
Therefore, inheritance belongs to the relationship between parent and child, where the parent can define private properties and use protected to prevent the child class from modifying or overriding them. Decorators can be used to decorate subclasses, decorating properties, methods, or even the entire class, just like a girl putting on makeup.
Decorator Principle#
Decorators are an experimental feature and are essentially functions or classes. Therefore, in order to use decorators in various projects, the experimental option must be enabled in the ts.config.
function decorator(target: object) {
}
@decorator
class ex {
}
Class Decorators#
// Click on classDecorator and find that a target needs to be passed
// This target is the constructor example that needs to be passed
const OperationDecorate: classDecorator =
(target: Function) => {
console.log(target) //[Function:example]
target.prototype.addOne = function() {
console.log("This is a decorator added method")
}
target.prototype.name = "oru private"
}
@OperationDecorate
class example {
public addone() {
}
private name
}
const t1 = new example()
console.log(t1.name)
t1.addone()
Summary#
Decorators take the constructor of a class and add various properties and methods to the prototype chain. After instantiation, the properties can be obtained by climbing the prototype chain.
!! Decorators are just syntactic sugar used for objects at the time of instantiation.
@Operation === Operation(example)
Decorator Stacking#
const OperationDecorate: classDecorator =
(target: Function) => {
console.log(target) //[Function:example]
target.prototype.addOne = function() {
console.log("This is a decorator added method")
}
target.prototype.name = "oru private"
}
const musicDecorator: classDecorator =
(target: Function): void => {
console.log("play music")
}
@musicDecorator
@OperationDecorate
class example {
}
Now, let's assume a scenario where a user triggers a specific condition and broadcasts a message, such as displaying a success message after a successful login or a payment message after a successful payment. The implementation is as follows:
const messageDecorator: classDecorator =
(target: Function) => {
target.prototype.message =
(content: string) => {
log(content + " success")
}
}
@messageDecortor
class example {
private message: void
payLoad() {
this.message("payment") //Method 1
}
}
new example().message("payment") //Method 2
Summary:#
As we can see, decorators can also be used to call prototype methods when instantiated in various methods.
Decorator Factory#
It is a higher-order function for decorators.
const messageDecorator: classDecorator =
(id) => {
return (target: Function) => {
target.prototype.message = "6"
target.protptype.addone = () => {
fetch(`/some/${id}`).then(res => log(res))
}
}
}
Method Decorators#
Purpose: Decorate methods in a class.
const applyMethods: MethodDecorator = (...args: any[]) => {
console.log(args)
//[{create:Function},
'create',
{value:Function() writeable:boolean,eumerabe:boolean
}]
let method = args[2].value
method = () => {
console.log(2)
}
method()
}
class example {
@applyMethods()
public create() {
console.log(1)
}
}