[name]Target || Value. Unresolved variable in some IDE

How to solve the problem of unknown variables in some IDE? can better declare variables in scope this ?

example

this.orderQuantity
// or
this.target.orderQuantity

[fracsi]

You could try to add JSDoc to the class (works in Jetbrains IDEs):

import { Controller } from '@hotwired/stimulus'
/**
 * @property {boolean} hasExampleTarget
 * @property {HTMLElement} exampleTarget
 * @property {HTMLElement[]} exampleTargets
 */
export default class YourController extends Controller {
  static targets = ['example']
  someMethod () {
    // All the above listed properties are autocompleted
  }
}

[vytant]

Our team also struggled with this issue and got tired of poor type checking, so we came up with decorators for targets and values. https://github.com/vytant/stimulus-decorators

import { Controller } from '@hotwired/stimulus';
import { Value, TypedController, Target } from '@vytant/stimulus-decorators';

@TypedController
export default class extends Controller {
  @Value urlValue!: string;
  @Value methodValue: string = 'GET';

  @Target outputTarget!: HTMLElement;
  @Target errorTarget!: HTMLElement;

  connect() {
    fetch(this.urlValue, { method: this.methodValue })
      .then(response => response.json())
      .then(result => {
        this.outputTarget.textContent = result;
      })
      .catch(error => {
        this.errorTarget.textContent = error;
      });
  }
}

All you have to do is define the *Target properties and it will add them to the static targets array. For *Value properties, it takes the type from the type annotation and allows you to assign a default value in a more understandable way.