New Package: Stimulus Typescript

1

Hi All

Released this package that makes it a breeze to work with Stimulus in Typescript.

Usage:

 import { ObjectAs, Typed } from "stimulus-typescript";

 const values = {
   name: String,
   alias: Array<string>,
   address: ObjectAs<{ street: string }>
 }

 const targets = { form: HTMLFormElement }
 const outlets = { "user-status": UserStatusController }
 
 class MyController extends Typed(Controller, { values, targets, outlets }) {
  foo() {
    this.nameValue.split(' ')
    this.aliasValue.map(alias => alias.toUpperCase())
    this.addressValue.street
    this.formTarget.submit()
    this.userStatusOutlets.forEach(status => status.markAsSelected(event))
  }
}

With this there is no need to declare the types manually like earlier…

static values = {
  code: String
}

declare codeValue: string
declare readonly hasCodeValue: boolean

static targets = [ "input" ]

declare readonly hasInputTarget: boolean
declare readonly inputTarget: HTMLInputElement
declare readonly inputTargets: HTMLInputElement[]

static outlets = [ "user-status" ]

declare readonly hasUserStatusOutlet: boolean
declare readonly userStatusOutlet: UserStatusController
declare readonly userStatusOutlets: UserStatusController[]
declare readonly userStatusOutletElement: Element
declare readonly userStatusOutletElements: Element[]

Thanks

Ajai

2 Likes