React TypeScript, How to fix typing issues when using "mui-icons" as props?

Question

I have small project compost by only a App.JSX that works 100%, but I need to turn it in to App.TSX.

When I change the extension to .TSX, I get two errors, I don't know how to deal with them.

1. function MyComponentWithIconProps(props) {. This one seems to be fixed by adding a :any at the end of props.

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

2. DoneIcon in <MyComponentWithIconProps statusImage={DoneIcon} /> I don't have any idea how to deal with this one.

(alias) const DoneIcon: OverridableComponent<SvgIconTypeMap<{}, "svg">> & {
    muiName: string;
}
import DoneIcon
Demos:

Icons
Material Icons
API:

SvgIcon API
Type 'OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }' is not assignable to type 'ReactElementLike | null | undefined'.
  Type 'OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }' is missing the following properties from type 'ReactElementLike': type, props, keyts(2322)
App.tsx(21, 47): Did you mean to call this expression?

Small and full project file:

import DoneIcon from "@mui/icons-material/Done";
import PropTypes from "prop-types";

function MyComponentWithIconProps(props) {
  const StatusImage = props.statusImage;
  return (
    <div>
      <StatusImage />
    </div>
  );
}

MyComponentWithIconProps.propTypes = {
  statusImage: PropTypes.element,
};

function App() {
  return (
    <>
      <div className="App">
        <MyComponentWithIconProps statusImage={DoneIcon} />
      </div>
    </>
  );
}

export default App;

Answer 1

Welcome to Typescript.

your first error states Parameter 'props' implicitly has an 'any' and this is true. You can explicitly declare it as any, but then why use Typescript? unknown is almost always better than any because if you know the type then declare it. If you don't, then it is unknown. I only use any when I just don't have the time and recognize what I lose by doing it. Below is a template you can use.

type TypeName = {
  text: string;
};

const ComponentName: React.FC<TypeName> = ({ text }) => {
  return <div>{text}</div>;
};

Your second error is pointing out that DoneIcon which is of the type 'OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }' cannot be assigned to the type statusImage requires which is ReactElementLike. So you need to figure out how to make DoneIcon fit the type of ReactElementLike which requires the properties type, props, and key.

This is all from "@types/prop-types" and the PropTypes you are using. I personally do not use them. PropTypes and Typescript types are not the same thing, one is checked at runtime, the other at compile time. If you have access to MyComponentWithIconProps then I would get rid of PropTypes and all the type definitions imported for them. I think this will simplify your types. If I could see MyComponentWithIconProps I would recommend a change. But for now I'd recommend getting rid of

MyComponentWithIconProps.propTypes = {
  statusImage: PropTypes.element,
};

and properly declaring the statusImage type in MyComponentWithIconProps (or temporarily using any to get up and running)`