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

Question

我在 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>
    }
}

我希望能够在我的 propTypes (FooSelectorProps) 中指定 onDetailsChanged 函数接受一个 FooDetails 对象，但是我不知道该怎么做。

Answer 1

而不是使用全局类型 Function 作为 onDetailsChanged 的类型，您可以写出类型，因此将 FooSelectorProps 更改为:

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

然后您将对 onDetailsChanged 回调进行类型检查。