외부파일 이용시 declare & ambient module

.js에 있는 변수를 .ts에서 이용하고 싶을 때, declare를 사용한다.

html css js파일은 그냥 <script src="">를 이용하면 된다. 근데, 그러고 쓰면 에러가 뜬다 그래서 declare를 사용하는데,

(data.js)

var a = 10;
var b = {name :'kim'};

(index.ts)

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

이렇게, declare로 a라는 변수가 어딘가에 있는데, number라고 재정의하면서 에러나지 마라! 라고 해주는게 된다.

그리고 declare는 힌트를 주는거기에 js파일로 변환이되진 않는다.

 

특히 .js로 만든 라이브러리 사용할 때 ts에서 엄청 에러가 나는데, $같은 제이쿼리도 다시 재정의 해줘야한다.

 

만약, .ts 에서 .ts파일로 변수를 가져다 쓰고 싶다면

(data.js)

export var a = 10;

(index.ts)

import {a} from './data';

console.log(a + 1);

이렇게 export import를 해주면 되는데 더 쉬운 문법이 있다.

ts는 이상하게 ambient module이라해서 그냥 변수를 쓰면 자동으로 가져다 쓸 수 있다. 즉 export import없어도 그냥 가져다 써도 된다. 

즉, 모두가 전역변수가 된다.

근데, 전역변수인게 불편하면 로컬모듈로 만들면 되는데,

(data.js)

export {}

var a = 10;

declare global {
	type Dog = string;
}

상단에 , export{} 를 쓰면 로컬 모듈이 되어 다른 파일에서 사용할 수 없어진다. 여기서 글로벌 변수를 만들고 싶으면,

이렇게 declare global{}안에 적어주면 된다.