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

타입스크립트를 사용하면서 간혹 window에 object 를 확장해야 하는 경우가 종종 발생한다.
이럴 때, 무작정 property를 추가하려고 시도하면 아래와 같은 오류가 발생한다. 

Window 인터페이스에는 해당 property의 정의가 없기에 TS typechecke에서 컴파일 오류를 발생시키는 것이다.

 

해결 방법은 크게 두가지가 있는 것 같다.

1️⃣ (window as any).(property)

window object를 any 타입으로 만들고 property에 접근하는 방법인데, 이는 TS를 쓰는 이유인 타입체킹이 안되니 좋은 방법은 아닌 것 같다.

2️⃣ .d.ts 정의

global이라는 네임스페이스에 윈도우 인터페이스를 정의하여 선언해준다.

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

이렇게 하면 TS typechecke에서는 Window 객체에 property가 존재하며 string 타입임을 알게 된다.

👉.d.ts 란?

.d.ts파일은 type을 정의(declare)하기 위해서 존재하는 파일로 기존 JavaScript로 만들어진 서드파티 모듈들을 TypeScript 환경에서도 사용할 수 있도록 타입만 별도로 정리한 파일이다.