Typescript+SolidJS: как я могу расширить свойства некоторого элемента JSX?

Question

Как я могу расширить реквизиты SolidJS какого-либо существующего элемента JSX и создать свой собственный интерфейс, подобный этому ButtonPropsинтерфейс в приведенном ниже примере для React.

      import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon: boolean;
}

const Button: React.FC<ButtonProps> = ({ title, showIcon, ...props }) => {
  return (
    <button {...props}>
      {title}
      {showIcon && <Icon/>}
    </button>
  );
};

Answer 1

Обычно я делаю это так:

      import type { Component, JSX } from "solid-js";
import { splitProps } from "solid-js";

export type ButtonProps = {
  title: string;
  showIcon: boolean;
} & JSX.HTMLAttributes<HTMLButtonElement>;

const Button: Component<ButtonProps> = (props) => {
  const [, rest] = splitProps(props, ["title", "showIcon"]);
  return (
    <button {...rest}>
      {props.title}
      {props.showIcon && <Icon/>}
    </button>
  );
}

В моем примере я использовал пересечение типов, но вы можете сделать то же самое, расширив интерфейс.

я использую Componentвведите здесь, что по умолчанию также добавляет необязательный childrenprop к реквизиту, хотя я думаю, что это изменится с выпуском 1.4.

Я также использую метод splitProps, чтобы избежать деструктурирования и сохранить реактивные обновления значений реквизита.

Answer 2

Почти так же, за исключением того, что вам нужно избегать деструктурирования реактивных свойств и вместо этого использовать splitProps, поэтому ваш пример будет переведен на:

      import { splitProps, JSX } from 'solid-js';

interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  // better make that optional, so you can use Button without having to
  // add the showIcon attribute:
  showIcon?: boolean;
}

const Button = (props: ButtonProps) => {
  const [local, buttonProps] = splitProps(props, ['title', 'showIcon']);
  return (
    <button {...buttonProps}>
      {local.title}
      {local.showIcon && <Icon/>}
    </button>
  );
};

Как видите, типы встроенных атрибутов элементов находятся в JSX, исходя из jsx-dom-expressions, которые преобразуют JSX в реактивные выражения в solid.