Reactjs 如何使用TypeScript为React组件回调指定函数参数？

我在TypeScript中有一个React组件，看起来像这样：

interface FooDetails {
    name: string
    latitude: number,
    longitude: number,
}

interface FooSelectorProps {
    onDetailsChanged: Function,
}

class FooSelector extends React.Component<FooSelectorProps, any> {
    constructor(props: FooSelectorProps, context) {
        super(props, context);
    }

    onTravelTypeChange(event) {
        this.setState({ travelType: event.target.value });
    }

    onDetailsChange(fooData) {
        this.props.onDetailsChanged({
            name: fooData.name,
            latitude: fooData.latitude,
            longitude: fooData.longitude,
        });
    }

    render() {
            return <div>...Foo selection UI...</div>
    }
}

接口详细信息{
名称：string
纬度：数字，
经度：数字，
}
接口FooSelectorProps{
onDetailsChanged：功能，
}
类选择器扩展了React.Component{
构造函数（道具：FooSelectorProps，上下文）{
超级（道具、背景）；
}
onTravelTypeChange（事件）{
this.setState（{travelType:event.target.value}）；
}
onDetailsChange（食品数据）{
这个。道具({
名称：fooData.name，
纬度：fooData.latitude，
经度：fooData.longitude，
});
}
render（）{
返回…Foo选择界面。。。
}
}

---

我希望能够指定我的propTypes（

FooSelectorProps

）中的

onDetailsChanged

函数使用

FooDetails

对象，但我不知道怎么做

对于

onDetailsChanged

的类型，您可以改为写出类型，而不是使用全局类型

函数

，因此将

FooSelectorProps

更改为：

interface FooSelectorProps {
    onDetailsChanged: ((details: FooDetails) => void)
}

---

然后，您将获得对

onDetailsChanged

回调的类型检查。

不确定，但检查此链接可能会有所帮助：可能重复