在 React Typescript 中，如何为原生 html 元素定义 ...rest 参数的类型？

Question

我正在尝试过滤一些道具，然后将其余道具传递给原生 html 元素，如下所示：

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

问题是这给了我这个错误：

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)

如何为 Typescript / React 中的 label 等原生 html 元素定义 ...rest 参数的类型？

Answer 1

label的类型为：React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>

因此，依靠这一点，这样的事情应该可以工作：

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

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

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

另外，请注意，由于第一个参数是 props，因此被解构为对象（因此 ...rest 是作为对象的剩余道具），而不是数组。