Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preact's TS definitions don't allow signals to be used in the "value" prop of an <input /> #106

Closed
Fry98 opened this issue Sep 9, 2022 · 2 comments · Fixed by preactjs/preact#3747
Labels
bug Something isn't working types

Comments

@Fry98
Copy link

Fry98 commented Sep 9, 2022

Current type definitions for Preact don't allow the use of a signal in the value prop of an <input /> element, like for example when trying to create a typical two-way data binding. Attempting to do something like:

<input type="text" value={input} onInput={e => input.value = e.currentTarget.value} />

gives you the TS error:

Type 'Signal<string>' is not assignable to type 'string | number | string[] | undefined'.

At this moment, you either have to manually recast it (e.g. input as any) or use the .value property of the signal which causes unnecessary re-renders of the component.

@marvinhagemeister marvinhagemeister added bug Something isn't working types labels Sep 9, 2022
@marvinhagemeister
Copy link
Member

Got this to work in Preact's vite preset by adding this to preact.d.ts, but the same code seems to work different in the signals repo.

import JSX = preact.JSX;

namespace JSX {
  type ReadonlySignal<T> = { readonly value: T };

  type PreactIntrinsic = preact.JSX.IntrinsicElements;

  export interface IntrinsicElements extends PreactIntrinsic {
    input: {
      value?:
        | PreactIntrinsic["input"]["value"]
        | ReadonlySignal<PreactIntrinsic["input"]["value"]>;
      checked?: ReadonlySignal<boolean> | boolean;
    } & Omit<PreactIntrinsic["input"], "checked" | "value">;
  }
}

I really wish there was a better way to debug types, other than just trying stuff out.

@marvinhagemeister
Copy link
Member

Filed an issue on the TS tracker: microsoft/TypeScript#50808

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working types
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants