在 React Typescript 中，如何為原生 html 元素定義 ...rest 參數的類型？

Question

我正在嘗試過濾一些道具，然后將道具的 rest 傳遞給本機 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)

我將如何為原生 html 元素（如label中的 label）定義...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被解構為 object （所以...rest是剩余的 props 作為對象），而不是作為數組。