Incompatible with tsx

[meepeek]

getting start example works in jsx but I cannot convert it to work with tsx for the compiler reports issue with function bind overload. I think this is necessary for nowadays, react and typescript pair is widely use. I guess the problem is about js loose function declaration, but I can be wrong for my inexperience in the code so I would like you guys to consider. The error message is as follow:

Failed to compile
project/investing-2021/modules/asset-monitoring/src/components/CharacterCounter/index.tsx
TypeScript error in project/investing-2021/modules/asset-monitoring/src/components/CharacterCounter/index.tsx(7,26):
No overload matches this call.
  Overload 1 of 2, '(observable: Observable<void>, defaultValue?: void): [() => void, Observable<void>]', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'void'.
  Overload 2 of 2, '(getObservable: (...args: unknown[]) => Observable<string>, defaultValue?: string | ((...args: unknown[]) => string)): [(...args: unknown[]) => string, (...args: unknown[]) => Observable<string>]', gave the following error.
    Argument of type 'Observable<void>' is not assignable to parameter of type '(...args: unknown[]) => Observable<string>'.
      Type 'Observable<void>' provides no match for the signature '(...args: unknown[]): Observable<string>'.  TS2769

     5 | 
     6 | const [textChange$, setText] = createSignal();
  >  7 | const [useText, text$] = bind(textChange$, "")
       |                          ^
     8 | 
     9 | function TextInput() {
    10 |   const text = useText()

[meepeek]

After posted, I just rethink and it's the problem with ts not accept the type. Is there any way to bypass it ? The error reported is on the library code so I should fix the compiler instead of patching the library.

change "" to null seems to fix it but according to the doc, since "" and null should be different on display so I'm not sure it will works.

Also I encounter another 2 errors after that as follow

Type 'void' is not assignable to type 'string | number | readonly string[]'.  TS2322

    14 |       <input
    15 |         type="text"
  > 16 |         value={text}   < ----- THIS IS THE 1ST ONE
       |         ^
    17 |         placeholder="Type something..."
    18 |         onChange={(e) => setText(e.target.value)}  < ------ THE 2ND ONE SAID setText EXPECTED 0 arugments but get 1
    19 |       />

[josepot]

Hi @meepeek !

Thanks for reporting this. This made me realize that we should probably have written that example using TS, like we've done with the rest of the examples and the docs. Anyhow, there is a simple way to fix that issue:

replacing line 6 with:

const [textChange$, setText$] = createSignal<string>();

should do it.

Stackblitz example.

I will leave this issue open until we've decided whether we should write the main example with TS or with JS.

Thanks!

[voliva]

Added typescript annotation to getting started