javascript - I React Typescript, hvordan definerer man typen for ...rest-parameteret for native HTML-elementer?

Jeg prøver å filtrere noen props og deretter sende resten av propsene videre til et native HTML-element slik:

const Placeholder = (
  display: boolean,
  ...rest: Array<React.LabelHTMLAttributes<HTMLLabelElement>>
) => <label {...rest} />

Problemet er at dette gir meg denne feilen:

Type '{ length: number; toString(): string; toLocaleString(): string; pop(): LabelHTMLAttributes<HTMLLabelElement> | undefined; push(...items: LabelHTMLAttributes<HTMLLabelElement>[]): number; ... 28 more ...; flat<U>(this: U[][][][][][][][], depth: 7): U[]; flat<U>(this: U[][][][][][][], depth: 6): U[]; flat<U>(this: U[]...' has no properties in common with type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'.ts(2559)

Hvordan vil jeg definere typene for ...rest-parametrene for et native HTML-element som en label i Typescript/React?

Svar #1

Typen til label er: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>

Så ved å stole på dette, bør noe som dette fungere:

interface Props
  extends React.DetailedHTMLProps<
    React.LabelHTMLAttributes<HTMLLabelElement>,
    HTMLLabelElement
  > {
  display: boolean;
}

const Placeholder = ({ display, ...rest }: Props) => <label {...rest} />;

const App = () => <Placeholder display htmlFor="form" />;

Merk også at siden det første argumentet props blir destrukturert som et objekt (så ...rest er de gjenværende props som et objekt), ikke som et array.

Relaterte artikler