ember-cli / ember-cli/ember-template-imports

Issue with declare class fields

Open
#242 9 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.