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

[Fry98]

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]

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]

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