ember-cli / ember-cli/ember-template-imports
Issue with declare class fields
- Dominant language
- JavaScript
- Stars
- 77
- Forks
- 41
- PR merge metrics
- No merged PRs in 30d
Description
I'm not entirely sure that the problem is related to this addon specifically, but it is clearly related to the `*.gts.` files
I have a situation where I need to extend a component from an addon. The addon class has a field `interactive` and I need to check this field to be true before making any further decisions in the code.
I had this working piece of code in a `*.ts` file and decided to move it to `*.gts`.
```ts
import SomeAddonComponent from 'some-addon/components/some-component';
import layout from 'some-addon/templates/components/some-component';
class MyComponent extends SomeAddonComponent {
declare interactive: boolean;
someFunction() {
if (this.interactive)
...
super.someFunction(event);
}
}
export default setComponentTemplate(layout, MyComponent);
```
`declare interactive` is used because the linter complains about the absence of the `this.interactive` field, in order to actually declare the existence of the field forcibly
After changing the extension to `*.gts` the code stopped working correctly. As a result of debugging, I noticed that `this.interactive` contains `undefined` instead of a boolean value. Looking at the prototype of the object, I noticed that the class actually overrides the `interactive` field, although the `*.ts` files do not do this.
I perceived `declare` as part of typescript, so I can’t fully understand, am I using things for other purposes, or is there some kind of conflict with the `*.gts` files?
Contributor guide
Research direction
Start by reproducing the component inheritance in equivalent *.ts and *.gts files, then inspect the generated class prototype and the value of this.interactive. The issue is resolved when the difference is explained and the expected inherited-field behavior is either restored or clearly documented, with a regression test if the repository has a suitable test entry point.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100