How to correctly pass props to a React component using TypeScript?

Question

typescript

Greetings!

What is the difference between these notations? And which option is better and why?

export const AuthDialog = ({onClose, isVisible}: AuthDialogInterface): JSX.Element => //.....

export const AuthDialog: FC<AuthDialogInterface> = ({onClose, isVisible}): JSX.Element => //.....

Answer 1

In the second case, you can pass children, and you do not need to add ": JSX.Element"

Answer 2

It's better to do it like this:

export const AuthDialog: FC<AuthDialogInterface> = ({onClose, isVisible}) => //.....