Reactive properties in TypeScript

[zuramai]

Hello, I'm trying to change the value of a reactive properties in TypeScript, but I got error message like this:

Object is of type 'unknown'

This is my code:

import Minze, { EventListeners, MinzeElement, Reactive } from "minze"

export class CounterClick extends MinzeElement {
    reactive: Reactive = [
        ['count',0]
    ]


    onButtonClick = () => {
        this.count++
    }
  
    html = () => `
      <div class="counter">
        <div class="count">${this.count}</div>
        <m-button/>
      </div>
    `

    eventListeners: EventListeners = [
        [window, "minze:click", this.onButtonClick]
    ]

}

Any ideas how to fix this?

[sergejcodes]

All reactive properties are created dynamically, that's why TypeScript doesn't know their types. You have to explicitly define the types in a separate interface (that is exported with the same name as the component class). The docs have a more detailed example.

In your case it should look like this:

import Minze, { EventListeners, MinzeElement, Reactive } from "minze"

export interface CounterClick {
  count: number
}

export class CounterClick extends MinzeElement {
  reactive: Reactive = [
    ['count',0]
  ]
  
  // ...
}

[zuramai]

Ahh I see, I missed that part. Thank you for your reply!