Как правильно передавать пропсы в React-компонент используя TypeScript?

Question

[Ilya Olovyannikov]

Приветствую!

Какая разница между этими нотациями? И какой вариант предпочтительнее и почему?

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

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

Answer 1

[Kataev]

Предпочтительнее первый вариант.
Почему: https://github.com/facebook/create-react-app/pull/8177

Answer 2

[Alexandroppolus]

Во втором случае можно передать children, и не надо дописывать ": JSX.Element"

Comments

[Ilya Olovyannikov]

В первом случае тоже можно передать children, а еще можно использовать PropsWithChildren

Answer 3

[Natebash]

Лучше делать вот так:

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

Comments

[Ilya Olovyannikov]

А почему?