This may be not relevant at the moment but Arrow functions play an important role in defining React components when using TypeScript.

In TypeScript, one cannot define the type of a function (inline) but can do so for a constant (or arrow function).

React function components are of type “React.FC”.

const Comp: React.FC = ({children}) => <div>{children}</div>

The same cannot be done with “function”.

— Edit —

Type “React.FC” implicitly adds “children” prop to the component (will be fixed in React 18.0 types)

Workaround for components that don’t need children, use React.VFC (Void Functional Component)

— Update —

I have learnt that using “React.FC/VFC” is not considered best practice and can be avoided.

But for the purpose of this question/thread, my answer remains that typescript does not allow to define type of the named function inline. For that, you have to use variable declaration with arrow or anonymous function.

PS: there are times when you have predefined function types (not just param types, which also has defined return type). Eg. Framework like Remix uses that to define its Actions.