reactjs - Typescript - Jak mogę rozszerzyć interfejs o istniejącą właściwość?

Tworzę system UI za pomocą Reacta używając Typescript. Chcę stworzyć komponent <Input />, który wkomponowuje prawdziwy <input />. Komponent <Input /> powinien przyjmować jako właściwość każdy atrybut, który jest przyjmowany przez <input />.

Aby to zrobić, sprawdziłem, co <input /> w React akceptuje, i to był wynik:

React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

Na początku ustawiłem mój interfejs w ten sposób:

interface InputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

ale jest za długie, żeby było zrozumiałe. Więc pomyślałem o użyciu Pick:

interface InputProps extends Pick<JSX.IntrinsicElements, 'input'>`

ale to po prostu dodaje do interfejsu samą właściwość input, zamiast faktycznie ją rozszerzać:

interface Props extends ...  {}

const Input = (props: Props) => {
    return <input {...props} />
}

Odpowiedź #1

interfejs dla natywnego wejścia to HTMLInputElement

interface InputProps extends HTMLInputElement {}

interfejs z właściwościami React

import { InputHTMLAttributes } from "react";

interface InputProps extends InputHTMLAttributes<HTMLInputElement>

aby uzyskać dostęp do ref, użyj przekazywanego ref:

const MyInput = React.forwardRef((props, ref) => {
  return(<input {...props} ref={ref} />);
});