TypeScript 시작하기 (22)

저번 시간에는 array 자료에 붙일 수 있는 tuple type 에 대해 알아보았습니다. 이번 시간에는 외부 파일 이용 시 declare & 이상한 특징인 ambient module 에 대해 알아보도록 하겠습니다.

1. .js 확장자에 있는 변수를 .ts 에서 이용하고 싶은데, 일반 html/css/js 로 개발하고 있을 시에는 그냥 정적 파일에 경로를 추가해주면 됩니다.

   <!--index.html -->
   <h4 id="title">인녕하세요</h4>
   <a href="naver.com" class="link">링크</a>
   <button id="button">버튼</button>
   
   <script src="data.js"></script>
   <script src="index.js"></script>

2. 일반 .js 파일 등에 있던 변수를 쓸 때 에러가 나지 않도록 재정의할 때 쓰는 declare 문법에 대해 알아보겠습니다. declare 문법은 타입스크립트 컴파일러에게 다른 파일에서 이것이 정의되었던 것 같아요. 라고 힌트만 주는 것이기 때문에 변환된 .js 파일에서는 보이지 않습니다. 특히 .js 로 만든 라이브러리를 사용할 때 변수/함수 같은 것을 declare 로 재정의하기도 합니다.

   declare let a: number;
   
   console.log(a + 1);

3. 추가로, 모든 ts 파일은 ambient module(글로벌 모듈) 입니다. import/export 없이도 다른 파일에 있던 변수를 쓸 수가 있습니다. 즉 전부 전역변수인데, 다른 파일에서도 같은 이름을 쓰고 싶을 수 있으니 export / import 문법 하나만 있어도 자동으로 로컬 모듈이 됩니다. 근데 갑자기 글로벌 변수를 만들고 싶다면 declare global 문법을 씁니다.

   export {};
   
   declare global {
     type Dog = string;
   }

지금까지 외부 파일 이용시 declare & 이상한 ambient module 에 대해서 알아보았습니다. 다음 시간에는 d.ts 파일에 대해서 알아보도록 하겠습니다.

(본 포스팅은 코딩애플(Coding Apple)의 '빠르게 마스터하는 타입스크립트' 강의 내용을 바탕으로 학습하며 정리한 글입니다.)