window 객체 extends하기

페이스북의 pixel을 웹에 추가해달라는 부탁을 받았다.

페이지 뷰를 tracking하기 위해 아래와 같이 재사용할 수 있는 코드를 구성한 후, 해당 코드를 HOC에서 useEffect로 돌리려고 했다.

참고 - github.com/vercel/next.js/tree/canary/examples/with-facebook-pixel

 

export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID;

export const pageview = () => {
  window.fbq('track', 'PageView');
};

// https://developers.facebook.com/docs/facebook-pixel/advanced/
export const event = (name, options = {}) => {
  window.fbq('track', name, options);
};

 

그러나, 외부 script를 통해 생성된 전역 객체는 TS에서 window로 잡히지 않는다.

따라서 아래와 같은 경고를 받게 된다. 

 

property 'fbq' does not exist on type 'Window & typeof globalThis'. 

 

lib.dom.d.ts을 확인해보니 window는 아래처럼 선언되어 있더라.

declare var window: Window & typeof globalThis;

 

다음과 같이 extends하자. 타입에러를 회피할 수 있게 된다. any가 싫다면, 실제 사용례를 따려 함수 시그니처를 넣는 등 타이핑을 해주자.

declare global {
  interface Window {
    fbq: any;
  }
}

 

이 외에도 다양한 방법으로 window 객체를 extends하던데 이건 github 공식 문서를 직접 확인하도록하자.

 

github.com/microsoft/TypeScript/issues/33128

Unable to extend window in TS 3.6 · Issue #33128 · microsoft/TypeScript