React / TypeScript: как мне обрабатывать этот стиль композиции компонентов?

Question

Я очень новичок в typescript, поэтому, пожалуйста, потерпите меня.

Я пытаюсь преобразовать этот react компонент:

interface ButtonProps {...}

const Button: React.FC<ButtonProps> = ({
  children,
  href,
  value
  as = 'button',
  ...props
}) => {
  const Element = href ? 'a' : as;
  // ...

  return (
    <Element {...props}>
      <span>{value || children}</span>
    </Element>
  );
};

Но я получаю следующую ошибку для элемента <Element>:

JSX element type 'Element' does not have any construct or call signatures.

Я могу удовлетворить компилятор, набрав Element с помощью any, но это выглядит грязно.

Как мне подходить к этому шаблону с TS точки зрения?

Спасибо!

Answer 1

Использование ElementType

interface ButtonProps {
  ...
  as?: ElementType
}