DEV Community

Cover image for Using Property Decorators in Typescript with a real example

Using Property Decorators in Typescript with a real example

Dany Paredes on May 31, 2020

I was talking about class decorators in typescript in my previous post, today is time for properties decorators, how to define and use it for writi...
Collapse
 
jwp profile image
John Peters

Very cool Dany! I recall many years ago when Java Spring came out and they talked about AOP at the time .NET didn't have anything close to it . Now we see this for .NET

All in all what you've shown here is really powerful. Thanks!

Collapse
 
marcela profile image
Marcel A

This does not work. All instances of the User class do have the same value for Password! Here is an example: TypeScript Playground

Collapse
 
navjot50 profile image
Navjot • Edited

There is a reason where every instance of User class is having the same value for the password. The article author is binding the properties to the target argument in the decorator function. According to the docs the target parameter in the decorator function is the prototype of the class (in this case User.prototype). So when the author did Object.defineProperty(target, propertyKey, { get: getter, set: setter }), then the property is being bound to the User.prototype object and not the current object. Since, the property is defined on the prototype it is available to all the instances of that class.

Collapse
 
ahuigo profile image
ahuigo • Edited

For es2022 or above, useDefineForClassFields is default to be true.
This causes that the property of instance(new User()) is independent from its User.prototype.

To make this example work only, we should set "useDefineForClassFields":false.

My example playground

Collapse
 
jascmiller profile image
Jamie Miller

Hi Marcel,

I came up for a solution with this problem. One should set a value on the object themselves using a unique symbol rather than a value that is accessed on the prototype.

function Min(limit: number) {
return function(target: Object, propertyKey: string) {
const symbol = Symbol();
Object.defineProperty(target, propertyKey, {
get: function() {
return this[symbol];
},
set: function(newVal: string) {
if(newVal.length < limit) {
Object.defineProperty(target, 'errors', {
value: Your password should be bigger than ${limit}
});
}
else {
this[symbol] = newVal;
}

}
});
}
}

Collapse
 
danywalls profile image
Dany Paredes

Thanks marcel for you feedback, the article was wrote one year and half, so I need take time for remmember, nowdays most of people use npmjs.com/package/reflect-metadata. If you found why is not working or someidea leave a message or link to share, When return from my holidays I promise update the article.

Collapse
 
jascmiller profile image
Jamie Miller

Hi Danny,

I came up for a solution with this problem. One should set a value on the object themselves using a unique symbol rather than a value that is accessed on the prototype.

function Min(limit: number) {
return function(target: Object, propertyKey: string) {
const symbol = Symbol();
Object.defineProperty(target, propertyKey, {
get: function() {
return this[symbol];
},
set: function(newVal: string) {
if(newVal.length < limit) {
Object.defineProperty(target, 'errors', {
value: Your password should be bigger than ${limit}
});
}
else {
this[symbol] = newVal;
}

}
});
}
}

Collapse
 
josethz00 profile image
José Thomaz

any solution for this issue?

Thread Thread
 
jascmiller profile image
Jamie Miller • Edited

Hi Jose,

I came up for a solution with this problem. One should set a value on the object themselves using a unique symbol rather than a value that is accessed on the prototype.

function Min(limit: number) {
return function(target: Object, propertyKey: string) {
const symbol = Symbol();
Object.defineProperty(target, propertyKey, {
get: function() {
return this[symbol];
},
set: function(newVal: string) {
if(newVal.length < limit) {
Object.defineProperty(target, 'errors', {
value: Your password should be bigger than ${limit}
});
}
else {
this[symbol] = newVal;
}

}
});
}
}

Collapse
 
snowfrogdev profile image
Philippe Vaillancourt

Could other decorators with a similar implementation be used along with this one? Something like this:

class User {
    username: string;
    @Min(8)
    @Max(12)
    @SpecialChar(2)
    password: string;
    constructor(username: string, password: string){
        this.username = username;
        this.password = password;
    }    
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
danywalls profile image
Dany Paredes

Yes, you can use nested decorators :D

Collapse
 
thekosmix profile image
Siddharth Kumar

with TS5.0, I'm getting below error:

Unable to resolve signature of property decorator when called as an expression. Argument of type 'ClassFieldDecoratorContext<User, string> & { name: "password"; private: false; static: false; }' is not assignable to parameter of type 'string'.ts(1240)

Anyone has been able to resolve it?

Collapse
 
bezael profile image
Bezael Pérez

Thank you so much for sharing!!