Decorators in 4.3.x can't use Object.defineProperty anymore.

[dannysmc95]

Bug Report

🔎 Search Terms

• decorator broken
• decorator defineProperty
• 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

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.

[MartinJohns]

Seems to be a duplicate of #44449. Search terms: defineproperty decorator.

[dannysmc95]

@MartinJohns thank you, my bad.

[dannysmc95]

@MartinJohns based on the response from the linked bug, I see no way around this? How do I fix or work around the issue?

I can't define anything that makes it work? So what is the expectation, I looked at the linked proposal but I can't say I understand what it is saying, how do I use a property decorator to change the actual property? or is this now not functional, and things like dependency injection (that is where I found this bug) do not work anymore?

Example the actual code I am working with does:

export class SomeModule {

    @Inject() helper!: SomeHelper;

    public something(): void {
        console.log(this.helper.someMethod());
    }
}

[dannysmc95]

Sorry, to expand, I got it working by specifically defining: useDefineForClassFields as false, as that should be the default, but it looks like the default value is actually true for it.

https://www.typescriptlang.org/tsconfig#useDefineForClassFields

[MartinJohns]

The default for useDefineForClassFields is false, unless you target esnext (in which case you should expect ECMAScript compliant behavior by default).

[dannysmc95]

@MartinJohns but with ECMAScript compliant behaviour, what is the alternative solution? What is the point of property decorators?

[MartinJohns]

The alternative solution is to wait for the decorator proposal to be finished and wait for it to be in stage 3 (and then wait for TypeScript to support it). The current decorator implementation in TypeScript is based on an old deprecated proposal, and the team is waiting for the proposal to be completed (and in stage 3) before investing any more effort in the decorator topic.

Remember that decorators are an experimental feature.

[dannysmc95]

@MartinJohns understood.

[Glandos]

The default for useDefineForClassFields is false, unless you target esnext (in which case you should expect ECMAScript compliant behavior by default).

This wasn't mentioned in any release notes as noted by @CarterLi in #34787 (comment)

I guess that a new entry should be done to explicitly define the current situation. Either use esnext without decorators, or don't use esnext, or set useDefineForClassFields to false in the meantime.