Typescript에서 window 객체에 property 추가하기

검프·2020년 1월 30일
6

개발을 하다보면 window 객체에 property를 추가하는 상황이 발생할 수 있는데, Typescript에서 무작정 property를 추가하려고 시도하면 아래와 같은 오류를 보게됩니다.

window.myNewProperty = window.myNewProperty || "SomeValue";
TS2339: Property 'myNewProperty' does not exist on type 'Window & typeof globalThis'.

Window 인터페이스에는 myNewProperty의 정의가 없으므로 Typescript의 타입 시스템에서 컴파일 오류를 발생시키는 내용입니다. 오류를 무시하거나 오류가 발생하지 않도록 설정할 수도 있지만, Typescript를 사용하는 이유를 잃게되는 것이므로 타입을 정의해주는 것이 바람직합니다.

검색해보면 다양한 솔루션들이 존재하는데, 아래는 전역 타입을 확장하는 방법입니다.
아래와 같이 사용하면 Typescript 타입 시스템은 Window 객체에 myNewProperty가 존재하며 문자열 타입임을 알게됩니다.

declare global {
  interface Window {
    myNewProperty: string;
  }
}

window.myNewProperty = window.myNewProperty || "SomeValue";

어차피 핑계지만, 풀타임이 아니다보니 Typescript를 사용하고는 있어도 더 이상 깊이가 생기지 않는 느낌이 듦니다. 몇 자 적다보니 그런 부분이 더 잘 들어나는 것 같네요.
다시 블로그를 시작하기로 마음 먹기를 잘한거 같아요.

profile
권구혁

0개의 댓글