Transition project to typescript

[maker0101]

No description provided.

[snqb]

1. FC already has types for children, so no need to put it here.
2. children are ReactNode AFAIK, not string. (ReactNode includes string)

[maker0101]

1. Good to know, thanks. I read afterwards that it's a good idea to make it explicit, when a component is accepting children (as some components don't). Thus it might be good to leave it. Do you agree?

2. In this Button case I actually only want text as children. Is string ok then because it is more specific?

[snqb]

a lot of times it's a good practice in cases like this when you're extending an HTML button, to extend its props like
interface ButtonProps extends HTMLButtonElement

and then use the ...props notation to pass some native button props to the <button> inside

[maker0101]

Awesome! Thanks so much Esen. This actually answered a question I had lurking in my mind for a while now about how to easily extend all HTML attributes to a component without writing tons of code.

I've chosen ComponentProps<"button"> over HTMLAttributes<HTMLButtonElement>after reading this article: https://dev.indooroutdoor.io/how-to-extend-any-html-element-with-react-and-typescript

Would you agree it's an even better choice?

[snqb]

children are in FC already

[maker0101]

I have to admit FC with Typescript confuses me :).

First, I stumbled upon sooo many ressources discouraging the use of FC, e.g. https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/.
So FC automatically adds children type to all React components? That's probably bas I want to be explicit about it, correct? What's your take on it?

Then, based on you comment I tried FC without children, but get Typescript errors. Here is what I tried:
const Content: FC = ({ children }) => { return <div className='Content'>{children}</div>; };

Error message: 'Property children does not exist on type {}'. What am I doing wrong?