[TypeScript] Declare & Ambient Module

프로젝트를 진행하다 보면 외부 자바스크립트 파일을 이용하는 경우가 있다.

import 문법으로 가져와 사용하면 되는데,

타입스크립트로 작성된 파일이 아닌, 자바스크립트로 작성된 파일이라면 타입 지정 문제로 에러가 발생할 수 있다.

// data.js
let a = 10;
let b = { name : 'kim' }

// index.js	
console.log(a + 1);

일반적인 경우라면 index.html 역할을 하는 곳에 두 파일을 첨부하면 된다.

(index.html)

<script src="data.js"></script>
<script src="index.js"></script>   // index.ts를 변환시킨 js 파일

콘솔창으로는 a + 1이 11로 잘 나오지만 타입스크립트 파일 내에서는 a가 정의되어 있지 않다는 에러가 발생한다.

타입스크립트 입장에서는 a라는 변수를 import 한 적이 없기 때문에 에러가 발생한다.

declare 키워드로 재정의하기

declare 키워드를 사용하면 이미 정의된 변수나 함수를 타입을 포함해서 재정의할 수 있다.

// data.js

let a = 10;

// index.ts

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

declare let a :number는 "a라는 변수를 이 파일에 정의해달라 " 는 뜻이다.

그래서 자바스크립트 파일 변수를 가져다가 쓰는 경우 타입 에러 & 변수가 없다는 에러를 방지하려면

declare를 사용한다.

특이한 점으로, declare가 붙은 코드들은 ts => js로 변환할 때 같이 변환되는 것이 아니라 사라진다.

컴파일러에게 힌트를 주는 역할이기 때문에 자바스크립트로 바뀌면 사라진다.

※ tsconfig.json 안에 allowJs 옵션을 true로 설정하면 자바스크립트 파일도 타입 지정이 알아서 된다.

그래서 React 같은 프로젝트에서 사용한다.

타입스크립트가 제공하는 기능이 하나 더 있다.

import export 없이도 타입스크립트끼리는 가져다쓸 수 있는 기능이다.

즉, a.ts에 있던 변수나 타입 정의를 b.ts에서도 설정 없이 가져다쓸 수 있다.

// data.ts

type Age = number;
let 나이 :Age = 20;

// index.ts

console.log(나이 + 1);
let 철수 :Age = 30;

import와 export 없이도 같은 폴더 내에 있는 타입스크립트 파일은 서로 사용이 가능하다.

왜냐하면, 타입스크립트 파일에 입력한 변수와 타입들은 전역 변수 취급을 받기 때문이다.

전역으로 쓸 수 있는 파일을 ambient module이라고 한다.

반면에 import 혹은 export 키워드가 하나라도 들어간 타입스크립트 파일은 로컬 모듈이 되고,

거기에 있는 모든 변수는 export를 해야지 다른 파일에서 사용이 가능하다.

타입스크립트 파일이 다른 파일에 영향을 끼치는 것을 막고 싶다면 export 키워드를 추가하면 된다.

// data.ts

export {};

type Age = number;
let 나이 :Age = 20;

// index.ts

console.log(나이 + 1);  // 에러 발생
let 철수 :Age = 30;     // 에러 발생

타입스크립트 파일은 import / export 문법이 있냐 없냐에 따라 글로벌 모듈 / 로컬 모듈로 나뉜다.

근데 로컬 모듈에서 전역으로 변수를 만들고 싶을 경우가 있다면, declare global를 사용하면 된다.

declare global {
    type Dog = string
}