Надежный JS-эквивалент React.HTMLProps<...>

Question

У меня есть компонент React с такими типами опор, как:

      type Props = React.HTMLProps<HTMLAnchorElement> & {
    to?: string;
};

Как вы пишете эквивалентные типы пропсов в SolidJS? Я пробовал это:

      type Props = Component<HTMLAnchorElement> & {
    to?: string;
};

И он компилируется, но у него нет таких же встроенных реквизитов, как у первого, таких как children.

Answer 1

Твердый JS имеет JSX.IntrinsicElementsкоторый предоставляет типы свойств, индексированные по имени тега:

      import { JSX } from 'solid-js';

type Props = JSX.IntrinsicElements['a'] & {
    to?: string;
};

Answer 2

Вы можете использоватьJSX.HTMLAttributes<T>:

      interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {}

Это удобно, когда вам нужно расширить какой-либо элемент дополнительными свойствами, как это делается в React:

      export interface Props extends JSX.HTMLAttributes<HTMLInputElement> {
  value: Accessor<string>;
  onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
  icon?: HTMLImageElement;
  label?: HTMLImageElement,
}

const Input: Component<Props> = (props) => {
  const [_, ...rest] = splitProps(props,  ['icon', 'label']);

  const handleInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (event) => {}

  return (
    <span class={style.wrapper}>
      {props.icon && props.icon}
      {props.label && props.label}
      <input {...rest} value={props.value()} onInput={handleInput} />
    </span>
  )
};

А для событий у вас есть способы:

       const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {
  console.log(event.currentTarget.value);
};

const handleInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (event) => {
  setValue(event.currentTarget.value);
};

Второй работает, потому что он как союз:

      type JSX.EventHandlerUnion<T, E extends Event> = 
  | JSX.EventHandler<T, E>
  | JSX.BoundEventHandler<T, E>;