HwangSee

221102 TIL Window 객체에 프로퍼티 추가하기

  • 2022년 11월 02일

오늘 한 일

  • 면접을 위한 CS 전공지식 노트 ~2-4까지 읽기
  • 타입스크립트에서 Window 객체에 프로퍼티를 추가하는 방법 정리

개발을 하다보면 브라우저에서 제공하는 Window 객체에 추가로 프로퍼티를 추가해서 사용해야 하는 상황이 발생한다.
자바스크립트였다면 Window.addProperty = function() { ... } 이렇게 쉽게 추가할 수 있겠지만,
타입스크립트의 경우 Window 객체 타입이 이미 지정되어 있고 객체에 존재하지 않는 프로퍼티나 메서드는 추가할 수 없도록 타입 체크를 하기 때문에 오류가 발생한다.

< 오류 메세지 >

<TS2339: Property 'addProperty' does not exist on type 'Window & typeof globalThis'.>

방법1) any 타입 사용

  • (window as any).addProperty = function() { ... }
  • 언뜻 간단해보이는 방법이지만 any를 사용하는 방법은 권장하지 않는다. 
    // index.html에 함수 추가하고 어딘가의 ts 파일에서 window.~~~ 함수로 불러오는 예제
document.querySelectorAll('.formbuilder-editor').forEach((element, i) => {
  (window as any).createEditor(element.id);
});

방법2) ~~~.d.ts 파일에 window 타입을 추가하고 사용

  • 타입스크립트 공식 문서 권장 방법
  • Winodw 객체는 주로 인터페이스 병합 방법을 사용하여 수행한다.
    • 인터페이스 병합이란? 같은 이름의 인터페이스일 경우 병합하는 유형을 뜻한다. 
        interface Member {
  name: string;
  age: number;
  }
  interface Member {
  address: string;
  }
  let member: Member = { name: 'HwangSee', age: 27, address: '서울 어딘가'}

declare global 선언을 사용하여 모듈에서 전역 범위를 확장하는 방법을 권장한다.

예시
// Ensure this is treated as a module.
export {};
declare global {
  interface Array<T> {
    mapToNumbers(): number[];
  }
}
Array.prototype.mapToNumbers = function () {
  /* ... */
};

출처

Documentation - TypeScript 1.8

https://github.com/microsoft/TypeScript/issues/33128

검색