sparkbit | SparkBit lightweight wallet for the CoinSpark protocol | Blockchain library

There's a lot of questions in there, but I'll try to answer them all :)

I would expect that the value would be initialized with Items value, but instead is undefined, why?

When your MyClass class is instantiated and your decorator code is run, the value of all properties of the object are undefined (even if you use a TypeScript property initializer, which you aren't).

Shouldn't this refer to the Required?

Yes, I think it does in your example. But in your Source1 link, the decorator is defined using a function expression (function logProperty()); in your example, you have switched this to an arrow function expression (const Required = ( ... ) =>). It's likely this switch will change what this refers to. To be safe, switch this to target[key].

Why I need to delete this[key]?

This block of code is deleting the original Items property and replacing it with a property of the same name that allows you to spy on the getting and setting of the variable. The delete this[key] line is guarding against the case where the property isn't configurable. (The delete operator returns false if the property in question is non-configurable:).

Object.defineProperty will create a property with the name of the key on the target class in my case MyClass, but isn't this property already there?

Yes, as mentioned above - this code is replacing the property with a new property. The new property is set up to allow you observe the getting and setting of this variable.

Moving forward and setting the value using the setter, how does the setter parameter val know what data it should hold ? I mean where is it coming ?

When your new Items property is set, the setter function is called with the soon-to-be new value of the property as a parameter (this setter function was previously set up as a setter function using Object.defineProperty). The implementation of this setter function sets value, which is a reference to target[key]. As a result, the value of Items gets updated.

To better understand how all this is working, try adding in some logging statements and then play around with getting/setting the Items property:

RouterStateSnapshot and ActivatedRouteSnapshot are imported from @angular/router, while the currentUser Service is supposed to be your own where you should store the authenticated state of your User (with a boolean for example).

You retrieve an instance of it through Dependency Injection in your guard's constructor like so :