My bread and butter with React and TypeScript is to type the functional components with the React.FC generic type. With your example above, that would be something like this:
exportconstStandardComponent:React.FC<{title?:string}>=({children,title='Dr.'})=>{// rest of the code}
Why? it adds automatically children for you, makes the signature easier to read (IMHO) and checks the return type.
My bread and butter with React and TypeScript is to type the functional components with the
React.FC
generic type. With your example above, that would be something like this:Why? it adds automatically
children
for you, makes the signature easier to read (IMHO) and checks the return type.Note: FC is a short-hand for FunctionComponent
Cool! I've used FunctionComponent in the past but didn't realize it actually added children for you.
Thanks for the tip!
The React TypeScript cheat sheet recommends doing them using the shorter version of Ben's syntax:
type AppProps = { message: string }; /* could also use interface */
const App = ({ message }: AppProps) => {message};
github.com/typescript-cheatsheets/...