ReactJS打字稿错误参数属性隐式具有“ any”类型

Question

接下来，在这里改编本教程，当尝试定义一个呈现某些HTML的函数时，我遇到了麻烦。

function Toolbar(props) {
    return (
        <div>
            <button onClick={() => props.onClick()}>Refresh</button>
        </div>
    );
}

Typescript中的此错误，因为未定义props。我知道为什么会收到错误，但是我缺少的是应该是哪种类型props？

我相信我应该能够在另一个这样的组件中使用它：

function App() {
    return (
        <div>
            <Toolbar onClick={() => alert('hello world')}>Test</Toolbar>
        </div>
    );
}

而这props正是我指定的内容。这似乎在这里得到证实：尽管该链接未提及打字稿。所以，我的问题是：根据定义，当您不知道所传递的内容时，此功能（将属性传递给函数或类的功能）如何与打字稿一起使用？

Answer 1

您应该为道具定义一个接口。

interface Props {
   onClick: Function;
}

function Toolbar(props: Props) {
   return (
       <div>
           <button onClick={() => props.onClick()}>Refresh</button>
       </div>
   );
}

我也喜欢将功能组件定义为箭头功能。而且，您可以将FC（功能组件）类型定义与Props通用类型一起使用。这样，您可以立即解构属性。

const Toolbar: React.FC<Props> = ({onClick}) => {
   return (
       <div>
           <button onClick={() => onClick()}>Refresh</button>
       </div>
   );
}