게으른개발너D

window 객체에 property 추가하기 본문

개발/TypeScript

window 객체에 property 추가하기

lazyhysong 2023. 8. 23. 15:58

google maps나 google books 등의 embed를 사용하거나 window 객체에 property를 추가하는 일이 있을 수 있다.

 

 

예를들어 google books 미리보기 embed를 사용하는 경우이다. 

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
  </head>
  <body>
    <div id="viewerCanvas"></div>
  </body>
</html>

html 파일에 script 태그를 사용하여 API 로더를 포함시킨다.

하지만 위의 html이 아닌 다른 ts 파일에서 아래와 같이 작성하면 window는 google이라는 property의 존재를 알지 못한다.

window.google.books.load();

function initialize() {
  var viewer = new window.google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:0738531367');
}

window.google.books.setOnLoadCallback(initialize);

property 'google' does not exist on type 'Window & typeof globalThis'.

 

 

또는 직접 만든 property를 무작정 추가하는 경우

window.myProperty = window.myProperty || 'HwaYeon';

당연히 window에선 해당 property의 존재를 모르기 때문에 아래와 같은 컴파일 오류를 발생시킨다.

 

property 'myProperty' does not exist on type 'Window & typeof globalThis'.

 

이를 해결하기 위해 전역 타입을 확장하는 방법을 쓸 수 있다.

전역 타입을 확장하면 Typescript의 타입 시스템은 Window 객체에 myProperty가 존재하며 우리가 선언한 타입임을 알게된다.

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

window.myProperty = window.myProperty || 'HwaYeon';
저작자표시

'개발 > TypeScript' 카테고리의 다른 글

Classes and Interfaces - classes, interfaces, polymorphism  (0) 2023.04.04
Functions - call signature, overriding, polymorphism, generics  (0) 2023.04.04
Overview of Typescript  (0) 2023.04.03
Software Requirement  (0) 2023.04.03
'개발/TypeScript' Related Articles more
Comments