Material-UI: How to declare a type for React.ComponentType<P> with typescript
Reference: https://www.typescriptlang.org/docs/handbook/jsx.html
By default the result of a JSX expression is typed as any. You can customize the type by specifying the JSX.Element interface. However, it is not possible to retrieve type information about the element, attributes or children of the JSX from this interface. It is a black box.
The reason why I lose all type information with JSX.Element
is because it extends React.ReactElement<any>
which has the type of any
. To fix this I used it like this
let myIcon: React.ReactElement<SvgIconProps> = <MoreVert />;
Now I have the element with all the type information.
As already briefly described by Ebuall in a comment, here's how you would declare the variable depending on whether you want the JSX element or the component type:
let myIconElement: JSX.Element = <MoreVert />;
let MyIconComponent: React.ComponentType<SvgIconProps> = MoreVert;
// Example component that uses the icon
function myComponent(props: {}) {
return <>
{myIconElement}
{<MyIconComponent />}
</>;
}