Material-UI: Как объявить тип для React.ComponentType <P>с машинописью

Question

Я использую Typescript и Material-UI Я хочу объявить тип компонента для такой переменной, как эта

import MoreVert from '@material-ui/icons/MoreVert'
import { SvgIconProps } from '@material-ui/core/SvgIcon';

let myIcon: SvgIconProps = <MoreVert />; // does not work

Но я получаю ошибку:

[ts]
Type 'Element' is not assignable to type 'SvgIconProps'.
  Types of property 'type' are incompatible.
    Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string'.
      Type 'ComponentClass<any>' is not assignable to type 'string'.

Так выглядит SvgIcon.ts .Что я делаю неправильно?

import * as React from 'react';
import { StandardProps, PropTypes } from '..';

export interface SvgIconProps
  extends StandardProps<React.SVGProps<SVGSVGElement>, SvgIconClassKey> {
  color?: PropTypes.Color | 'action' | 'disabled' | 'error';
  component?: React.ReactType<SvgIconProps>;
  fontSize?: 'inherit' | 'default' | 'small' | 'large';
  nativeColor?: string;
  titleAccess?: string;
  viewBox?: string;
}

export type SvgIconClassKey =
  | 'root'
  | 'colorSecondary'
  | 'colorAction'
  | 'colorDisabled'
  | 'colorError'
  | 'colorPrimary'
  | 'fontSizeInherit'
  | 'fontSizeSmall'
  | 'fontSizeLarge';

declare const SvgIcon: React.ComponentType<SvgIconProps>;

export default SvgIcon;

Answer 1

Я нашел, что все эти ответы мне не помогли.

Так что самый простой способ исправить это было объявить с типом any:

let myIcon: any = MoreVert; 

и использовать его каккомпонент:

<myIcon />

Answer 2

Как уже кратко описал Ebuall в комментарии, вот как вы бы объявили переменную в зависимости от того, хотите ли вы элемент JSX или тип компонента:

let myIconElement: JSX.Element = <MoreVert />;
let MyIconComponent: React.ComponentType<SvgIconProps> = MoreVert;

// Example component that uses the icon
function myComponent(props: {}) {
    return <>
        {myIconElement}
        {<MyIconComponent />}
    </>;
}

Answer 3

Ссылка: https://www.typescriptlang.org/docs/handbook/jsx.html

По умолчанию результат выражения JSX набирается как любой.Вы можете настроить тип, указав интерфейс JSX.Element.Однако из этого интерфейса невозможно получить информацию о типе элемента, атрибутов или дочерних элементов JSX.Это черный ящик.

Причина, по которой я теряю всю информацию о типах с JSX.Element, заключается в том, что она расширяет React.ReactElement<any>, который имеет тип any.Чтобы исправить это, я использовал это так:

 let myIcon: React.ReactElement<SvgIconProps> = <MoreVert />; 

Теперь у меня есть элемент со всей информацией о типах.

Answer 4

<MoreVert /> является компонентом.

SvgIconProps просто определите список реквизитов, передаваемых этому компоненту.

Вы должны попробовать:

let myIcon: SvgIcon = <MoreVert />;