SolidJS•14mo ago

This expression is not callable. Type 'Number' has no call signatures.

Hey! I added typescript to my project and now one of my createSignal isn't working properly and I can't understand why. code:

import { createResource, createSignal } from 'solid-js'
import './App.css'

function App() {
  const [floatingTextContent, setFloatingTextContent] = createSignal<string>("some text to see the floating");
  const [textBoxScrollWidth, setTextBoxScrollWidth] = createSignal<number>(0);

  let checkScrollWidth = (event) => {
    let textBoxValue:string = event.target.value;
    let textBoxScrollWidth:number = event.target.scrollWidth;
    if(textBoxValue.length < 5) {
      setTextBoxScrollWidth(textBoxScrollWidth);
    }
    if(textBoxScrollWidth() != textBoxScrollWidth) { // This one is broken, see error below
      // Wait untill the word is finished
      if(textBoxValue[textBoxValue.length-1] == " ") {
        setFloatingTextContent(textBoxValue);
        let floatingTextElem = document.getElementById("floatingText");
        
        textBoxValue = "";
      }
    }
  }

  return (
    <main>
      {/* <label for="textbox">Pour your heart out to the stars</label> */}
      <span id="floatingText">{floatingTextContent()}</span> {/* This one works as expected */}
      <input type="text" id="textbox" name="textbox" oninput={checkScrollWidth} />
      {/* <button onClick={debug}>debug</button> */}
    </main>
  )
}

export default App

import { createResource, createSignal } from 'solid-js'
import './App.css'

function App() {
  const [floatingTextContent, setFloatingTextContent] = createSignal<string>("some text to see the floating");
  const [textBoxScrollWidth, setTextBoxScrollWidth] = createSignal<number>(0);

  let checkScrollWidth = (event) => {
    let textBoxValue:string = event.target.value;
    let textBoxScrollWidth:number = event.target.scrollWidth;
    if(textBoxValue.length < 5) {
      setTextBoxScrollWidth(textBoxScrollWidth);
    }
    if(textBoxScrollWidth() != textBoxScrollWidth) { // This one is broken, see error below
      // Wait untill the word is finished
      if(textBoxValue[textBoxValue.length-1] == " ") {
        setFloatingTextContent(textBoxValue);
        let floatingTextElem = document.getElementById("floatingText");
        
        textBoxValue = "";
      }
    }
  }

  return (
    <main>
      {/* <label for="textbox">Pour your heart out to the stars</label> */}
      <span id="floatingText">{floatingTextContent()}</span> {/* This one works as expected */}
      <input type="text" id="textbox" name="textbox" oninput={checkScrollWidth} />
      {/* <button onClick={debug}>debug</button> */}
    </main>
  )
}

export default App

error in code editor:

This expression is not callable.
  Type 'Number' has no call signatures.ts(2349)
let textBoxScrollWidth: number

This expression is not callable.
  Type 'Number' has no call signatures.ts(2349)
let textBoxScrollWidth: number

2 Replies

lxsmnsyc•14mo ago

you have a shadowed variable:

let textBoxValue:string = event.target.value;
let textBoxScrollWidth:number = event.target.scrollWidth;

let textBoxValue:string = event.target.value;
let textBoxScrollWidth:number = event.target.scrollWidth;

which conflicts with your signal.

if(textBoxScrollWidth() != textBoxScrollWidth)

if(textBoxScrollWidth() != textBoxScrollWidth)

this one should've been obvious To summarize:

let foo = () => 'foo';

const example = () => {
  let foo = 'bar';

  console.log(foo); // 'bar'
  console.log(foo() != foo); // error
}

let foo = () => 'foo';

const example = () => {
  let foo = 'bar';

  console.log(foo); // 'bar'
  console.log(foo() != foo); // error
}

CoffeeTailsOP•14mo ago

oh shit. Yes it should have been. My bad. I think I need new glasses 😅

Gaming

Programming

This expression is not callable. Type 'Number' has no call signatures.