score:5

Accepted answer

the functioncomponent type basically boils down to a function that receives props and returns a reactelement:

(props: propswithchildren<p>, context?: any): reactelement | null;

so one option would be to type your non-arrow function accordingly:

function helloworld(): reactelement {
  return (
    <div>
      hello
    </div>
  );
}

the other option (which integrates better with the rest of the ts react ecosystem) is to store your function in a named variable:

interface someprops {
  somevalue: number
}

const helloworld: functioncomponent<someprops> = function helloworld({ somevalue }) {
  return <div>hi {somevalue}</div>
}

overall though i would recommend that you just use arrow functions as they offer benefits especially when it comes to js scopes and the this reference.


Related Query

More Query from same tag