I'm missing something here with the validation how to add types validation? Having error "element 'children' implicitly has an 'any' type".
import * as React from 'react';
import Button from './Styles';
const Button1 = ({ children, ...props }) => (
<Button {...props}>{children}</Button>
);
Button1.propTypes = {};
export default Button1;
Yes you are missing a type for Props as whole, which means typescript sees it as any and your ts rules dont allow it.
You have to type your props as:
import React, { FC } from "react";
interface Props {
// any props that come into the component
}
const Button1: FC<Props> = ({ children, ...props }) => (
<Button {...props}>{children}</Button>
);
You can also add the predefined type to your functional components like this:
const Button1: React.FC<{}> = ({ children }) => (
<Button>{children}</Button>
);
By this way you don't have to repeat yourself to define children props.
The fuller version could be like this:
interface Props {
// any other props that come into the component, you don't have to explicitly define children.
}
const Button: React.FC<Props> = ({ children, ...props }) => {
return (
<Button {...props}>{children}</Button>
);
};
Please note it works for React 16.8
This was a major issue for me and I wasted a lot of time figuring out the correct solution. Right now you have an error with the children prop but in the future, you might have this error for a lot of functions where you are destructuring the params. So I would suggest, follow this GitHub issue.
const yourfunc = ({destructuredProps}: {destructuredProps: type}) => {}