global.d.ts 파일을 사용해서 window 객체 속성 추가하기

3월 22일 부트캠프 강의를 수강하며, 개발 환경과 프로덕션 환경에 따라 다른 환경변수를 사용하기 위해 window에 새로운 속성을 추가했더니 다음과 같은 타입 오류가 발생하였다.

코드

const { REACT_APP_API_BASE_URL: API_BASE_URL = "" } =
  window._ENV ?? process.env;

export { API_BASE_URL };

오류 메세지

Property '_ENV' does not exist on type 'Window & typeof globalThis'.ts(2339)

쉽게 말해서 _ENV 속성이 Window객체에 존재하지 않는다는 오류이다. 이를 해결하려면 window의 타입을 확장시키면 된다.

나는 다음과 같은 순서로 타입을 확장시켜, 오류를 해결하였다.

1. global.d.ts 파일을 만들기

2. global.d.ts 파일에 타입을 확장시키는 코드 작성하기

// global.d.ts
declare global {
  interface Window {
    _ENV: {
      REACT_APP_API_BASE_URL: string;
    };
  }
}

위의 코드는 Window 객체에 _ENV 속성을 추가하고, 타입을 지정하는 코드이다.
지금 프로젝트에서는 _ENV에 어떤 내용이 작성되는지 알고 있어서 REACT_APP_API_BASE_URL: string;의 타입을 작성해주었지만, 속성의 타입을 알 수 없다면 any를 작성하면 된다.

3. declare global 코드에서도 다음과 같은 오류가 발생하여 추가적으로 코드를 작성

 Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.ts(2669)

타입스크립트에는 global augmentation을 위해 해당 코드가 모듈 내부에 있어야 하는 규칙이 있는데, 내 코드는 모듈 스코프 내에 있지 않아 발생한 오류이다.
global.d.ts파일이 모듈로 인식될 수 있도록 파일 내부에 export {} 코드를 작성했더니 오류가 해결되었다.

// global.d.ts
export {};

declare global {
  interface Window {
    _ENV: {
      REACT_APP_API_BASE_URL: string;
    };
  }
}

4. 타입스크립트 컴파일러가 해당 파일을 읽을 수 있도록 tsconfing.json 설정 추가하기

tsconfing.json의 include에 global.d.ts파일을 추가하여 컴파일러가 해당 파일을 읽을 수 있도록 설정하였다.

{
  // ...다른 속성들,
  "include": ["src", "craco.config.js", "types/global.d.ts"]
}