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='example.test.@gmail.com' {...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;
This code:
const formSubmitHandler: SubmitHandler<IFormInputs> = (data: IFormInputs) => {
console.log('the form data is', data);
}
is TypeScript code that says the type of the formSubmitHandler constant is SubmitHandler<IFormInputs>, which is a type (SubmitHandler) with a generic type argument (IFormInputs). SubmitHandler is presumably a generic type defining a function type, probably something like this:
type SubmitHandler<DataType> = (data: DataType) => void;
The value assigned to that constant is an arrow function accepting a single data parameter of the type IFormInputs.
For what it's worth, here's the equivalent JavaScript code (in this case, that's just removing the type annotations):
const formSubmitHandler = (data) => {
console.log('the form data is', data);
}
(In both cases, the code is relying on Automatic Semicolon Insertion because there should be a ; at the end of the assignment statement [just after the closing } of the function body]. Given that the author included the ; on the console.log, the missing ; on the assignment is probably a typo/misunderstanding, not an intentional decision to use ASI.)
The anonymous function (aka fat arrow function ()=>{}) is similar in essence to lambda functions of other languages. It does not have .this value.
They are quick ways to return computed values without all the overhead of named functions or methods.
If you would like to know more, check out this link
Fireship does a really good job of differentiating different functions and their purposes here.
With Typescript you can declare the assigned variable name of the anonymous function as an arrow function. Say we have a compute function that adds to values passed into the function:
Javascript:
const add = (a, b) =>{
return a+b
}
Typescript
const add = (a:number, b:number) =>{
return a+b
}
Now add does not have a static type and may be inferred, however, if you need strict type declarations (preferable) you need to define a type for add as a function which would look like (parameters)=> return type:
type Add = (a: number, b: number) => number;
const add: Add = (a, b) => {
return a + b;
};