파노라마에 마커를 띄우는 경우 naver.map.marker 의 setMap() 함수 파라미터 타입 문의

[snowman95]

안녕하세요.

naver.maps.Marker 의 setMap 함수의 파라미터는 Map 또는 null 를 받을 수 있는데
Naver Maps API 사이트 예시 에서는 setMap 함수 파라미터로 naver.maps.Panorama 타입의 파노라마 객체를 넣고 있습니다.

var HOME_PATH = window.HOME_PATH || '.',
    pano = null;

function initPanorama() {
    pano = new naver.maps.Panorama("pano", { // pano 는 naver.maps.Panorama 타입입니다.
        position: new naver.maps.LatLng(37.3599605, 127.1058814),
        pov: {
            pan: -135,
            tilt: 29,
            fov: 100
        }
    });

    naver.maps.Event.addListener(pano, "init", function() {
        marker.setMap(pano); // 여기서 어떻게 naver.maps.Panorama 타입을 Map | null 타입에 넘길 수 있는 건가요 ? 🤔

        var proj = pano.getProjection();
        var lookAtPov = proj.fromCoordToPov(marker.getPosition());
        if (lookAtPov) {
            pano.setPov(lookAtPov);
        }
    });
}

var marker = new naver.maps.Marker({ // marker 는 naver.map.marker 타입입니다.
    position: new naver.maps.LatLng(37.359484, 127.105333),
    icon: { // 레티나 디스플레이 대응 마커 아이콘
        url: HOME_PATH +"/img/example/pin_map.png", // 110x72 크기의 원본 이미지
        size: new naver.maps.Size(55, 36),
        anchor: new naver.maps.Point(28, 36),
        origin: new naver.maps.Point(0, 0),
        scaledSize: new naver.maps.Size(55, 36)
    }
});

... 이하 생략

실제로 이렇게 했을 때 파노라마 뷰에 마커가 잘 나타나기는 합니다.
자바스크립트 언어 특성상 가능한 동작이라고 볼 수는 있지만, 아래 두가지가 그냥 넘어가기에는 찝찝한 것 같네요.

1. Naver Maps 문서 에 setMap() 함수의 파라미터는 naver.maps.Map | null 이라는 되어있다는 점
   

2. 타입스크립트 사용 시에는 의도적으로 unknown 타입으로 변환 후 naver.map.Map 타입으로
   다시 변환해주어야 setMap 함수의 파라미터에 넣을 수 있다는 점 이렇게 해야되는 것 자체가 정상적인 방법이라고 생각되지 않음

• 코드 예시

    const marker: naver.maps.Marker = new naver.maps.Marker(생략)
    const pano: naver.maps.Panorama = new naver.maps.Panorama(생략)
    marker.setMap(pano) //  (not work ❌) 

  

  실제로 이렇게 하면 잘 동작합니다.

    const marker: naver.maps.Marker = new naver.maps.Marker(생략)
    const pano: naver.maps.Panorama = new naver.maps.Panorama(생략)
    marker.setMap(pano as unknown as naver.maps.Map) //  (this is work ✅) 

결론 (문의 내용)

어떻게든 동작하는 이유는 마커의 setMap 함수에서 필요로 하는 변수/함수가 naver.maps.panorama 에도 존재하고 naver.maps.Map 에도 존재하기 때문인 거겠죠?
그렇다면 공식 문서에 파라미터 타입을 naver.maps.Map | naver.maps.panorama | null 이렇게 해야 되는거 아닐까요?

---

네이버 지도 타입정의 패키지 @types/navermaps 의 타입

공통 KVO 타입

 class KVO {
        constructor();
        addListener(eventName: any, listener: () => any): MapEventListener;
        addListenerOnce(eventName: any, listener: () => any): MapEventListener;
        bindTo(key: string, target: KVO, targetKey?: string): void;
        clearListeners(eventName: string): void;
        get(key: string): any;
        hasListener(eventName: string): boolean;
        removeListener(listeners: MapEventListener | MapEventListener[]): void;
        set(key: string, value: any, silently?: boolean): void;
        setValues(properties: any): void;
        trigger(eventName: string, eventObject?: any): void;
        unbind(key: string): void;
        unbindAll(): void;
    }

naver.mapMap 타입

class Map extends KVO {
        controls: any;
        data: any;
        layers: any;
        mapTypes: any;
        mapSystemProjection: any;
        constructor(mapDiv: string | HTMLElement, mapOptions?: MapOptions);
        addPane(name: string, elementOrIndex: HTMLElement | number): void;
        destroy(): void;
        fitBounds(bounds: any, margin?: any): void;
        getBounds(): Bounds;
        getCenter(): Coord;
        getCenterPoint(): Coord;
        getElement(): HTMLElement;
        getMapTypeId(): string;
        getOptions(key?: string): any;
        getPanes(): MapPanes;
        getPrimitiveProjection(): Projection;
        getProjection(): MapSystemProjection;
        getSize(): Size;
        getZoom(): number;
        morph(coord: Coord | CoordLiteral, zoom?: number, transitionOptions?: TransitionOptions): void;
        panBy(offset: Point | PointLiteral): void;
        panTo(coord: Coord | CoordLiteral, transitionOptions: TransitionOptions): void;
        panToBounds(bounds: Bounds | BoundsLiteral, transitionOptions: TransitionOptions, margin?: Margin): void;
        refresh(noEffect?: boolean): void;
        removePane(name: string): void;
        setCenter(center: Coord | CoordLiteral): void;
        setCenterPoint(point: Point | PointLiteral): void;
        setMapTypeId(mapTypeId: string): void;
        setOptions(newOptionsOrKey: any, value?: any): void;
        setSize(size: Size | SizeLiteral): void;
        setZoom(zoom: number, effect?: boolean): void;
        updateBy(coord: Coord | CoordLiteral, zoom: number): void;
        zoomBy(deltaZoom: number, zoomOrigin?: Coord | CoordLiteral, effect?: boolean): void;
    }

naver.map.panorama 타입

class Panorama extends KVO {
        constructor(panoramaDiv: string | HTMLElement, panoramaOptions: PanoramaOptions);
        aroundControl: AroundControl | null;
        controls: KVOArray[];
        getLocation(): PanoramaLocation;
        getMaxScale(): number;
        getMaxZoom(): number;
        getMinScale(): number;
        getMinZoom(): number;
        getPanoId(): string;
        getPosition(): LatLng;
        getPov(): PanoramaPov;
        getProjection(): PanoramaProjection;
        getScale(): number;
        getSize(): Size;
        getVisible(): boolean;
        getZoom(): number;
        setOptions(key: string, value: any): void;
        setOptions(newOptions: PanoramaOptions): void;
        setPanoId(panoId: string): void;
        setPanoIdWithPov(panoId: string, pov: PanoramaPov): void;
        setPosition(position: LatLng | LatLngLiteral): void;
        setPov(pov: PanoramaPov): void;
        setScale(scale: number): void;
        setSize(size: Size | SizeLiteral): void;
        setVisible(visible: boolean): void;
        setZoom(zoom: number): void;
        zoomIn(): void;
        zoomOut(): void;
    }