Confused about this particular JavaScript way of expressing a function

I know there are different ways of declaring a function (or expressing it), however, I haven’t seen/used anything like this before (given, I am a “newbie” in the field). Can someone, please, explain how this particular function declaration works and when it is used? Can’t wrap my head around that “:” following function name!

const formSubmitHandler: SubmitHandler<IFormInputs> = () => {}

(Not sure if it has anything to do with typescript)

import './App.css';
import { useForm, SubmitHandler } from 'react-hook-form'

type IFormInputs = {
  email: string,
  password: string
}

const formSubmitHandler: SubmitHandler<IFormInputs> = (data: IFormInputs) => {
  console.log('the form data is', data);
}


const App = () => {
  const { register, handleSubmit, watch, formState: {errors}} = useForm<IFormInputs>()

  console.log(errors, 'this is an error explanation');
  console.log(watch('email'), 'watch the email variable');

  return (
    <div style={{padding: '2rem', border: '1px black solid'}}>
    <form onSubmit={handleSubmit(formSubmitHandler)}>
      <input defaultValue='[email protected]' {...register('email')}/>
      <br />
      {errors.password && <span>This field is required</span>}
      <br />
      <input {...register('password', { required: true })}/>
      <br />
      <br />
      <input type="submit" />
    </form>
    </div>
  )
}


export default App;