Извлечь тип метода из интерфейса в Typescript

Question

Я использую GoogleMap.d.ts выглядит следующим образом:

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

Я использую panTo напрямую и хотел бы извлечь его тип для использования в качестве типа функции, чтобы избежать дублирования кода.

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

Я изучал такие утилиты, как Pick, но они собираются возвращать подмножество интерфейса, когда я действительно хочу получить доступ к типу одного метода интерфейса. Что-то вроде этого было бы идеально:

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

Answer 1

Вы можете использовать CLASS[MEMBER], чтобы получить его тип.

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