使用 typescript 为 props 的扩展运算符反应功能组件

Question

如何使用展开操作来解构传递给组件的道具？我已经尝试了一些方法来做到这一点，但没有任何运气。

import React from 'react';
import "./button.component.css"



function ButtonComponent( {onClick: ()=> void, caption:string, ...otherProps}) {
    return (
        <button onClick={onClick} className="button" {...otherProps}>{caption}</button>
    );
};

export default ButtonComponent;

这给出了以下错误：

Binding element 'onClick' implicitly has an 'any' type.  TS7031

    4 | 
    5 | 
  > 6 | function ButtonComponent({onClick, caption, ...otherProps}) {
      |                           ^
    7 |     return (
    8 |         <button onClick={onClick} className="button" {...otherProps}>{caption}</button>
    9 |     );

Answer 1

你可以先声明一个接口，然后赋值为type：

interface Props {
  onClick: ()=> void;
  caption:string,
  otherProps: any
}

然后使用它：

ButtonComponent( {onClick, caption , otherProps}: Props)

也可以内联使用：

ButtonComponent( {onClick, caption , ...otherProps}: {onClick: ()=> void, caption:string, otherProps: any})