typescript
앰비언트 선언 - declare var

외부 변수의 타입을 지정해주는 앰비언트 선언 - declare var

프레임워크, 라이브러리 또는 다른 서드파티에서 선언된 변수의 타입을 지정할 수 있다

declare var 가 필요한 경우 예시

브라우저 전역 변수 접근 시

// 브라우저에서 전역으로 제공하는 변수
declare var localStorage: Storage;
declare var navigator: Navigator;
 
// 사용자 정의 메타태그 정보 접근
declare var META_VERSION: string;

스크립트 태그로 불러온 외부 변수

<!-- HTML -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
// TypeScript 파일
declare var google: {
  maps: {
    Map: new (element: HTMLElement, options: any) => any;
    // 기타 필요한 타입들...
  }
};
 
// 이제 google maps API 사용 가능
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8
});

빌드 시스템에서 주입되는 상수

// 웹팩 DefinePlugin으로 주입되는 상수
declare var PRODUCTION: boolean;
declare var API_ENDPOINT: string;
 
if (PRODUCTION) {
  console.log('프로덕션 모드에서 실행 중');
  fetch(API_ENDPOINT + '/data');
}

레거시 전역 네임스페이스 통합

// 기존에 전역으로 정의된 네임스페이스
declare namespace MyCompany {
  function doSomething(): void;
  var version: string;
  
  namespace Utils {
    function formatDate(date: Date): string;
  }
}
 
// 사용
MyCompany.doSomething();
console.log(MyCompany.version);

Node.js 확장 모듈 타입 정의

// process.env 확장
declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test';
    API_KEY: string;
    DATABASE_URL: string;
  }
}
 
// 이제 process.env 사용 시 타입 체크
if (process.env.NODE_ENV === 'production') {
  // ...
}

동적으로 추가되는 DOM 속성

// DOM 요소에 커스텀 데이터 속성 추가
declare interface HTMLElement {
  _myAppData: any;
}
 
const element = document.getElementById('app');
element._myAppData = { initialized: true };