I am trying to describe incoming props for child element an I am getting the following error

Parameter 'props' implicitly has an 'any' type.ts(7006) (parameter) props: any

// Parent Element 
<GeneralButton icon={<TodayIcon />} type='button' onClick={add} text={'add'} />

// Child element 
import React from 'react';
// MUI ****************************************************//
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { Button, Box } from '@material-ui/core';
import { SvgIconProps } from '@material-ui/core/SvgIcon';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '& > *': {
        margin: theme.spacing(1),
      },
    },
  })
);

interface generalBtnPrpos {
  form?: string;
  disabled?: boolean;
  icon?: React.ReactElement<SvgIconProps>;
  type: string;
  onClick: () => void;
  text: string;
}

export default function GeneralButton<generalBtnPrpos>(props) {
  const classes = useStyles();

  return (
    <Box className={classes.root}>
      <Button form={props.form} disabled={props.disabled} type={props.type} onClick={props.onClick} startIcon={props.icon} variant='contained' color='primary'>
        {props.text}
      </Button>
    </Box>
  );
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

you should give type on your parameter props the code its like this

interface generalBtnPrpos {
  form?: string;
  disabled?: boolean;
  icon?: React.ReactElement<SvgIconProps>;
  type: string;
  onClick: () => void;
  text: string;
}

export default function GeneralButton<generalBtnPrpos>(props: generalBtnPrpos) {
.....

CodePudding user response：

You are actually never typing the props in your GeneralButton component. You are creating a Generic called generalBtnPrpos instead of using the interface you have created called generalBtnPrpos.

To type your props correctly you could add the generalBtnPrpos interface after your props and remove the <generalBtnPrpos> Generic you have created since you are not using it:

export default function GeneralButton(props: generalBtnPrpos) {
  const classes = useStyles();

  return (
    <Box className={classes.root}>
      <Button form={props.form} disabled={props.disabled} type={props.type} onClick={props.onClick} startIcon={props.icon} variant='contained' color='primary'>
        {props.text}
      </Button>
    </Box>
  );
}