targets and typescript

Hi there!

Thanks for open sourcing stimulus. It’s been a real joy to use so far and I’m excited to really dig deep into it.

I noticed that the default example creates a typescript compiler error.

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "output" ]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!' //[ts] Property 'outputTarget' does not exist on type 'default'.
  }
}

The Stimulus documentation says:

When Stimulus loads your controller class, it looks for target name strings in a static array called targets. For each target name in the array, Stimulus adds three new properties to your controller. Here, our “source” target name becomes the following properties:

• this.sourceTarget evaluates to the first source target in your controller’s scope. If there is no source target, accessing the property throws an error.
• this.sourceTargets evaluates to an array of all source targets in the controller’s scope.
• this.hasSourceTarget evaluates to true if there is a source target or false if not.

Is there anyway to let Typescript know about this.sourceTarget, this.sourceTargets, and this.hasSourceTarget? I thought this might be alleviate since the library is written in Typescript.

[sunnyrjuneja]

Thank you @docstun! I see that someone has the same problem as me. I should have checked the forum too 😃. Since the maintainers are aware of the issue and there is a workaround, I’ll close this issue.

Workaround for future searchers:

import { Controller } from "stimulus"

export default class extends Controller {
  nameTarget: Element
  nameTargets: Element[] 
  hasNameTarget: boolean

  static targets = [ "name" ]

  // …
}
```

[sstephenson]

FYI:

If you use @sunnyrjuneja 's sulotion, you will need this config in tsconfig file, otherwise it will raise an error: xxxx has no initializer and is not definitely assigned in the constructor.

“strictPropertyInitialization”:false

You can use an exclamation point to bypass the strict initialization check:

class extends Controller {
  static targets = [ "name" ]

  readonly nameTarget!: Element
  readonly nameTargets!: Element[]
  readonly hasNameTargets!: boolean
}