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.

Possible duplicate of Typescript: How to define type for a function callback (as any function type, not universal any) used in a method parameter — Mayank Shukla
– Mayank Shukla, Commented Aug 11, 2017 at 7:25

Wilka · Accepted Answer · 2017-08-11 07:24:01Z

34

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.

answered Aug 11, 2017 at 7:24

Wilka

29.8k15 gold badges79 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related