How to specify function parameters for React component callback with TypeScript?

Question

I have a React component in TypeScript that looks something like this:

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

I'd like to be able to specify that the onDetailsChanged function in my propTypes (FooSelectorProps) takes a FooDetails object, but I can't figure out how to do that.

Answer 1

Instead of using the global type Function for type of onDetailsChanged, you can write out the type instead, so change FooSelectorProps to:

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

then you'll get type checking for the onDetailsChanged callback.