i have confusion about typescript in react

April 22, 2024

i am beginner to typescript,Is the following approach correct for typescript?

my parent component

interface MailDetailsProps {
  mailId?: string;
}

interface MailPopup {
  open?: boolean;
  width?: string;
  icon?: React.ReactNode;
  title?: string;
}

const MailDetails: React.FC<MailDetailsProps> = ({ mailId }) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();

  const [mailPopup, setMailPopup] = useState<MailPopup>({});

  return (
    <>
      <MailDetailsPopup mailPopup={mailPopup} setMailPopup={setMailPopup} />
    </>
  );
};

MailDetails.propTypes = {
  mailId: PropTypes.string
};

export default MailDetails;

my child component

interface MailDetailsPopupProps {
  mailPopup: any;
  setMailPopup: React.Dispatch<React.SetStateAction<any>>;
}

const MailDetailsPopup: React.FC<MailDetailsPopupProps> = ({ mailPopup, setMailPopup }) => {
  const { t } = useTranslation();
  const [emailOpen, setEmailOpen] = useState(false);

  return (
  
  );
};

export default MailDetailsPopup;

I am not sure about define mailPopup: any.Because i already defined in my parent component.

>Solution :

First:
Don’t use …more in interface.

second:
You have mailPopup declared as any in child component so what do you expect ?
export interface and type it properly.

interface MailDetailsPopupProps {
  mailPopup: MailPopup; // exported from parent component
  setMailPopup: React.Dispatch<React.SetStateAction<MailPopup>>;
}