HTMLInputElement forwardRef не принимает имя

Question

Codesandbox .

Вот мой компонент ввода:

import styled from 'styled-components'
import React, { forwardRef } from 'react'

type Props = {
  err: boolean
  maxWidth: string
}

export const Input = forwardRef<HTMLInputElement, Props>(({ ...rest }, ref) => {
  return <StyledInput {...rest} ref={ref} />
})

const StyledInput = styled.input<Props>``

Вот использование:

<Input name='password' type='password' autoComplete='password' required />

Почему имя дает мне ошибку (как я вижу, другие реквизиты тоже имеют ошибку):

Type '{ name: string; type: string; autoComplete: string; required: true; }' is not assignable to type 'IntrinsicAttributes & Props & RefAttributes<HTMLInputElement>'.
  Property 'name' does not exist on type 'IntrinsicAttributes & Props & RefAttributes<HTMLInputElement>'.ts(2322)

Когда интерфейс реакции по умолчанию имеет этот реквизит:

interface HTMLInputElement extends HTMLElement {
    name: string;
    /**
     * Gets or sets a string containing a regular expression that the user's input must match.
     */
}

Answer 1

Первый тип в forwardRef<HTMLInputElement, Props> указывает только тип ref, поэтому вы не можете передавать свойства внутри HTMLInputElement как реквизиты.

Вместо этого вы должны расширить тип Props на добавив тип HTMLInputElement в качестве опции.

type Props = {
  err: boolean
  maxWidth: string
} & HTMLInputElement

Однако в этом случае вам необходимо будет предоставить все 200 с чем-то свойств HTMLInputElement в качестве реквизита для вашего Input. Это не хорошо, но у Typescript есть небольшая хитрость для этого. Вместо этого вы можете использовать Partial<HTMLInputElement>.

type Props = {
  err: boolean
  maxWidth: string
} & Partial<HTMLInputElement>

Теперь вам потребуется предоставить свои собственные определенные реквизиты (err и maxWidth), и вы можете дополнительно предоставить любое свойство от HTMLInputElement .

Надеюсь, это поможет.

Answer 2

Вот решение:

interface Props extends React.ComponentPropsWithoutRef<'input'> {
  err?: boolean
  maxWidth?: string
}

Answer 3

Вы должны указать свой тип реквизита, как показано ниже

static propTypes = {
      name: PropTypes.string,
      ...
 }

Надеюсь, это поможет!