Typed Stimulus controllers

🤝 Create type-safe Stimulus controllers

$ npm install @hotwired/stimulus @sigbit/stimulus-ts

Usage

import{TypedController}from'@sigbit/stimulus-ts'classControllerAextendsTypedController({element: HTMLDivElement,targets: {form: HTMLFormElement,},values: {delay: Number,},outlets: {// Types are inferred from other controllersanotherController: ControllerB,},}){connect(){this.element// ^? (property) Controller<HTMLDivElement>.element: HTMLDivElementthis.formTarget// ^? (property) formTarget: HTMLFormElementthis.hasFormTarget// ^? (property) hasFormTarget: booleanthis.formTargets// ^? (property) formTargets: HTMLFormElement[]this.delayValue// ^? (property) delayValue: numberthis.hasDelayValue// ^? (property) hasDelayValue: booleanthis.anotherControllerOutlet// ^? (property) anotherControllerOutlet: ControllerBthis.anotherControllerOutletElement// ^? (property) anotherControllerOutletElement: HTMLFormElementthis.anotherControllerOutletElements// ^? (property) anotherControllerOutletElements: HTMLFormElement[]this.hasAnotherControllerOutlet// ^? (property) hasAnotherControllerOutlet: booleanControllerB// ^? class ControllerB extends TypedController<HTMLFormElement>() {}}}

Without this package

import{Controller}from'@hotwired/stimulus'classControllerAextendsController<HTMLDivElement>{statictargets=['form']staticoutlets=['another-controller']staticvalues={delay: Number}readonlyformTarget!: HTMLFormElementreadonlyformTargets!: HTMLFormElement[]readonlyhasFormTarget!: booleandelayValue!: numberreadonlyhasDelayValue!: booleanreadonlyanotherControllerOutlet!: ControllerBreadonlyanotherControllerOutletElement!: HTMLFormElementreadonlyanotherControllerOutletElements!: HTMLFormElement[]readonlyhasAnotherControllerOutlet!: booleanconnect(){// ...}}

License

MIT