title: trying to convert calc app to typescript, what type is this function suppose to be?
body: <ul>
  <li><p>I'm trying to convert this calculator app into TypeScript.</p>
  </li>
  <li><p>the three functions, (handleClick, handleEqual, handleClear) how come typescript is NOT yelling at me to specify something about the type of their functions? Only one takes an argument, which is a number, is I specified the type of the argument for val:number. But is that really all I need here?</p>
  </li>
  <li><p>Is there a site that you recommend that can help figure types out? Seems quite confusing.</p>
  <pre><code>  import React, { useState } from 'react';
    import * as math from 'mathjs';
    import '../styling/App.css';
    import { Button } from './button';
    import { Input } from './input'
    import { ClearButton } from './clear-button';
  
    const App = () =&gt; {
      const [input, setInput] = useState('');
  
      const handleClick = (val: number) =&gt; {
        setInput(input + val)
      }
  
      const handleEqual = () =&gt; {
        setInput(math.evaluate(input))
      }
  
      const handleClear = () =&gt; {
        setInput('');
      }
  
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;div className=&quot;calc-wrapper&quot;&gt;
            &lt;Input input={input}/&gt;
            &lt;div className=&quot;row&quot;&gt;
              &lt;Button handleClick={handleClick}&gt;7&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;8&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;9&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;/&lt;/Button&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row&quot;&gt;
              &lt;Button handleClick={handleClick}&gt;4&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;5&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;6&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;*&lt;/Button&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row&quot;&gt;
              &lt;Button handleClick={handleClick}&gt;1&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;2&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;3&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;+&lt;/Button&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row&quot;&gt;
              &lt;Button handleClick={handleClick}&gt;.&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;0&lt;/Button&gt;
              &lt;Button handleClick={handleEqual}&gt;=&lt;/Button&gt;
              &lt;Button handleClick={handleClick}&gt;+&lt;/Button&gt;
            &lt;/div&gt;
            &lt;ClearButton handleClear={handleClear} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    export default App;
  </code></pre>
  </li>
  </ul>
  <p>I've now edited to add my button component</p>
  <pre><code>    import React, {FC} from 'react';
      import '../styling/button.css';
  
      // create types for props
      type ButtonProps = {
        // HandleClick needs to a be a function type with a parameter that takes a ReactNode (since that's the type of props.children in this case, and you want to pass it into that function
        handleClick: (children: React.ReactNode) =&gt; void; // basically, clicking the reusable component I made, the arg is a ReactNode 
        // don't need to specify children prop, &lt;ButtonProps&gt; has it by default
      }
  
                      // set type for value
      const isOperator = (val: React.ReactNode) =&gt; {
        // isNaN() only takes a number parm, and only checks whether a number is set to specal value of 'NaN'
        return (typeof val === &quot;number&quot; &amp;&amp; !isNaN(val)) || val === &quot;.&quot; || val === &quot;=&quot;;
      }
  
      // generic type, FC
      export const Button: FC &lt;ButtonProps&gt; = ({children, handleClick}) =&gt; {
        return (
          &lt;div className={`button-wrapper ${isOperator(children) ? null : &quot;operator&quot;}`}
              onClick={() =&gt; handleClick(children)}
          &gt;
            {children}
          &lt;/div&gt;
        )
      }
  </code></pre>