Stimulus + Typescript Types

Explanation.md

In stimulusjs you can define a component (known as a controller) like so:

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["item"];
  
  function connect() {
    if(this.hasItemTarget) {
      console.log(this.itemTarget)
    }
  }
}

Under the hood stimulus creates the following class properties dynamically:

• this.hasItemTarget
• this.itemTarget

These class properties are created at runtime.

To get around this in typescript we need to define them manually:

import { Controller } from "stimulus";

export default class extends Controller {

  static targets = ["item"];

  // use declare to strip type definitions during transformation
  declare hasItemTarget: boolean
  declare itemTarget: HTMLElement

  function connect() {
    if(this.hasItemTarget) {
      console.log(this.itemTarget)
    }
  }
}

Obviously this can get repetative as there are more targets defined.

So is there any way with utility types or any other black magic to make these dynamic properties recognised by typescript?

This thread sums it up: https://twitter.com/sstephenson/status/1365863627912339457