在React + TypeScript中,可以使用React组件的Props类型来定义函数类型,而不是使用一般的函数类型。这样可以更好地利用TypeScript的类型检查和自动补全功能。
以下是一个示例解决方法:
import React from 'react';
// 定义组件的Props类型
type MyComponentProps = {
onClick: (event: React.MouseEvent) => void;
};
// 使用Props类型定义组件
const MyComponent: React.FC = ({ onClick }) => {
return ;
};
// 使用组件
const App: React.FC = () => {
const handleClick = (event: React.MouseEvent) => {
console.log('Button clicked');
};
return ;
};
export default App;
在上面的示例中,我们使用了React的MouseEvent
类型和HTML元素类型来定义了onClick
函数的参数类型。通过这种方式,TypeScript可以确保我们传递给onClick
函数的参数是正确的类型,并且可以在编码过程中提供自动补全和类型检查功能。
请注意,我们使用了React.FC
类型来定义组件的类型。这是React的函数式组件类型的简写方式。如果组件没有子组件或其他特殊需求,可以直接使用React.FC
来定义组件类型。