Extract method type from an interface in Typescript

Question

The GoogleMap.d.ts I am using looks like this:

export declare class GoogleMap extends React.PureComponent<GoogleMapProps, GoogleMapState> {
    state: GoogleMapState;
    registeredEvents: google.maps.MapsEventListener[];
    mapRef: Element | null;
    getInstance: () => google.maps.Map<Element> | null;
    panTo: (latLng: google.maps.LatLng | google.maps.LatLngLiteral) => void;
    setMapCallback: () => void;
    componentDidMount(): void;
    componentDidUpdate(prevProps: GoogleMapProps): void;
    componentWillUnmount(): void;
    getRef: (ref: HTMLDivElement | null) => void;
    render(): React.ReactNode;
}

I am using panTo directly and would like to extract its type to use as a function type to avoid code duplication.

// Map Component
const Map = () => {
const [mapObj, setMapObj] = useState(null)
return 
<Map onLoad={(map) => setMapObj(map)}>
<Marker panTo={mapObj?.panTo.bind(mapObj)} />
</Map>
}

// Marker Component
// Bad - this duplicates the panTo type
type PanTo = (latLng: google.maps.LatLng | google.maps.LatLngLiteral) => void;

const Marker = ({panTo}) => <GoogleMarker panTo={panTo} />

I have looked into utilities such as Pick but they are going to return a subset of an interface when what I actually want is access a the type of a single method of an interface. Something like this would be ideal:

const Marker = ({panTo}: {panTo: Method<GoogleMap, 'panTo'>}) => <GoogleMarker panTo={panTo} />

possible duplicated of stackoverflow.com/questions/45209142/… — AsukaSong
– AsukaSong, Commented May 8, 2020 at 3:36
You just want a lookup type of the form GoogleMap["panTo"]. Note that I can't test that this works for your particular case because the code doesn't seem to be a minimal reproducible example. — jcalz
– jcalz, Commented May 8, 2020 at 3:40

satanTime · Accepted Answer · 2020-05-08 06:14:40Z

0

You can use CLASS[MEMBER] to get its type.

const func: GoogleMap['panTo'] = (latLng) => {
  console.log(latLng);
};

answered May 8, 2020 at 6:14

satanTime

13.7k1 gold badge34 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

Extract method type from an interface in 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