# TypeScript Property Decorators

**URL:** <https://forum.codewithmosh.com/t/typescript-property-decorators/12894>\
**Category:** TypeScript\
**Created:** [June 7, 2022, 12:59pm UTC](https://forum.codewithmosh.com/t/typescript-property-decorators/12894 "2022-06-07T12:59:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![drullo](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@drullo](https://forum.codewithmosh.com/u/drullo)\
**Post date:** [June 7, 2022, 12:59pm UTC](https://forum.codewithmosh.com/t/typescript-property-decorators/12894/1 "2022-06-07T12:59:03Z")

</div>

In the TypeScript course, the code in the Property Decorators section does not work for me. I have confirmed that the `MinLength` function does get called and that the `return` statement within it also gets called. I’ve placed `console.log` statements in these sections and they do get displayed. However, the `get()` and `set()` code inside of the `PropertyDescriptor` never run.

---

<div class="post-metadata">

**Author:** ![drullo](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@drullo](https://forum.codewithmosh.com/u/drullo)\
**Post date:** [June 7, 2022, 1:27pm UTC](https://forum.codewithmosh.com/t/typescript-property-decorators/12894/2 "2022-06-07T13:27:43Z")

</div>

I was able to resolve this by setting `useDefineForClassFields` to false, based on the following issues:

> <https://github.com/microsoft/TypeScript/issues/44673>
>
> \# Bug Report
> 
> 
> 
> \### 🔎 Search Terms
> 
> \* decorator broken
> \* decorator define…Property
> \* decorator Object.defineProperty
> \* decorator target issue
> 
> \### 🕗 Version & Regression Information
> 
> Issue starts in 4.3.x (was previously fine in 4.2.4 and below).
> 
> \- This changed between versions 4.2.4 and 4.3.x
> 
> \### ⏯ Playground Link
> 
> The playground link with this code works fine, so it's not a reliable test, but when using the NPM version of typescript that is where the issue is, see my gist here:
> https://gist.github.com/dannysmc95/da689ae30ef6c05e3fb1778a7c8143a8
> 
> If you create a basic file with typescript 4.2.4 you will see the file works, if you then install a 4.3.x version (I did a few versions including latest and next) it will say:
> 
> \`\`\`Cannot read property 'say' of undefined\`\`\`
> 
> \### 💻 Code
> 
> \`\`\`typescript
> function SetValue(): any {
> return (target: Object, propertyKey: string) =\> {
> Object.defineProperty(target, propertyKey, {
> get: () =\> {
> return new MyHelper();
> },
> });
> }
> }
> 
> class MyHelper {
> public say(message: string): void {
> console.log(message);
> }
> }
> 
> class MyClass {
> 
> @SetValue() public helper!: MyHelper;
> }
> 
> const instance = new MyClass();
> console.log(instance.helper.say('hello'));
> \`\`\`
> 
> \### 🙁 Actual behavior
> 
> In versions above 4.2.4 (i.e. 4.3.x) this will throw the error:
> \`\`\`
> TypeError: Cannot read property 'say' of undefined
> \`\`\`
> 
> In versions 2.4.2 and below it will output:
> \`\`\`
> hello
> undefined
> \`\`\`
> That is correct.
> 
> \### 🙂 Expected behavior
> 
> 4.3.x should work the same as 4.2.4.

> <https://github.com/microsoft/TypeScript/issues/44449>
>
> \# Bug Report
> 
> Using a property decorator doesn't seem to work anymore. In the …playground it does work however (see links below).
> 
> \### 🔎 Search Terms
> 
> typescript 4.3 property decorator
> 
> \### 🕗 Version & Regression Information
> 
> \- This changed between versions 4.2 and 4.3
> 
> \### ⏯ Playground Link
> 
> Interestingly this bug doesn't occur in the \[playground\](https://www.typescriptlang.org/play?noImplicitAny=false&strictNullChecks=false&strictFunctionTypes=false&strictPropertyInitialization=false&strictBindCallApply=false&noImplicitThis=false&noImplicitReturns=false&alwaysStrict=false&esModuleInterop=false&declaration=false&emitDecoratorMetadata=false&target=99&jsx=0&allowSyntheticDefaultImports=true#code/GYVwdgxgLglg9mABAEwKYQBSIA4Cc5RwBciAhmAJ4A0iA1qhSQAr7aq5QUDSDiAlIgDeAKESIA8gCMAVuigA6NMBhhULOGw4UseAnBr1qQ0WMQBzVFAwCRp0xAQBnOABtU8l3DNYA5Bag+-ADcJna4liC4SIYhdgC+VMKhiI6WWABupC4gqPzGdmIOYM5uHl6+qQE0mdm5fLGmCSZxwcJxSRAupI6OiADC+YgAAmgQJsBwxClQuCpmIe3CRY5QiBCIALyIqgDu-dYhS-ITcJuIPpKkuD4hy67unt4Qx5N8QA). Maybe it is linked to modules somehow? This is the \[link to the repo\](https://github.com/maccesch/ts43\_decorator\_bug).
> 
> Only the index.ts and the C1.ts are relevant.
> 
> \### 💻 Code
> 
> The difference seems to be that for this TS code
> 
> \`\`\`typescript
> function dec(proto, key) {
> Object.defineProperty(proto, key, {
> get() { ... }
> set(value) { ... }
> });
> }
> 
> class C {
> @dec
> foo: string;
> }
> \`\`\`
> 
> In the playground sth like this JS is generated:
> 
> \`\`\`javascript
> class C {
> }
> decorate(C, 'foo', dec);
> \`\`\`
> 
> while in my example project this JS is generated:
> 
> \`\`\`javascript
> class C {
> foo;
> }
> decorate(C, 'foo', dec);
> \`\`\`
> 
> \### 🙁 Actual behavior
> 
> The code behaves as if the decorator is never executed (it is however).
> 
> \### 🙂 Expected behavior
> 
> The simple field should have been replaced by the property with getter/setter.