preactjs / signals

Manage state with style in every framework
https://preactjs.com/blog/introducing-signals/
MIT License
3.81k stars 95 forks source link

@preact/signals-react@2.0.0 Getting a typescript error when trying to do two way binding #519

Closed MahmoodKhalil57 closed 8 months ago

MahmoodKhalil57 commented 8 months ago

When I try to do two-way binding like so:

<input type="text" value={text} onChange={(e) => { text.value = e.currentTarget.value }} />

I get the following typescript error Type 'Signal<string>' is not assignable to type 'string | number | readonly string[] | undefined'. Type 'Signal<string>' is missing the following properties from type 'readonly string[]': length, concat, join, slice, and 19 more.ts(2322) index.d.ts(3325, 9): The expected type comes from property 'value' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'

even though the code works fine and as expected

I posted more on this, with two potential solutions here https://github.com/preactjs/signals/discussions/518

MahmoodKhalil57 commented 8 months ago

As pointed out by @XantreGodlike, this issue was probably caused because I didnt use the @preact/signals-react-transform plugin babel plugin.

In that scenario this should work just find

<input type="text" value={text.value} onChange={(e) => { text.value = e.currentTarget.value }} />

more explanation by @developit here https://github.com/preactjs/signals/discussions/518#discussioncomment-8746780

This issue can be closed in my opinion