코드를 짜다보면 외부 자바스크립트 파일을 이용하는 경우가 있다. import문법으로 가져가져다가 사용하면 되는데 안타깝게도 그 파일이 ts로 작성된게 아니라 js로 작성된 파일이면 무수한 에러가 기다리고 있을것이다.
왜냐 당연히 타입이 지정이 안되어 있기 때문이다.
예를 들어 data.js라는 파일이 있고 그리고 index.ts파일에서 저 a라는 변수를 사용하고 싶으면 어떻게 할까?
만약 일반 html css js 개발시에는 그냥 위처럼 <script src=""> 를 사용하면 된다.
ts에서 사용할때 declare를 사용해 재정의를 하지 않으면 에러가 발생할것이다. console의 결과는 그대로 11이 나오지만 말이다. TS는 js에 있는 변수를 자동으로 가져다 사용할수 없다.
변환된 파일을 보면 declare문법은 없다. declare로 정의한 내용은 js로 변환되지 않는것이다.
특히 js로 만든 라이브러리를 사용할때 ts에서 에러가 무수하게 나올것이다.
예를 들어 jquery를 사용한다고 할때 ts에서는 그런걸 잘 모르기때문에 $표시를 재 정의를 해줘야한다.
만약 ts파일을 다른 ts파일로 변수를 가져다 사용하고 싶으면 import export문법을 사용해야한다. 그런데 이것보다 조금더 쉽게 사용할수있는 방법이 있다.
ts파일은 그냥 ts파일을 만들고 변수를 만들면 자동으로 글로벌 모듈 ambient module이 된다. 모든 ts파일이 해당 파일의 변수를 가져다 사용할수 있다는 것 이다. 실제로 ts파일끼리는 import export없이도 가져다 사용할수가 있다.
예를 들어 만약 위처럼 name이라는 변수를 사용할때 이미 정의되어 있으면 이런 에러가 발생한다. 즉 전부 전역변수가 된다는것이다.
하지만 전부 전역변수가 되면 어려움이 생길것이다 그럼 글로벌 모듈이 아니라 로컬 모듈로 만들면된다.
그럴떄는 export문법을 사용하면 자동으로 로컬모듈로 사용될것이다.
만약 위처럼 로컬 모듈로 만들었는데 갑자기 글로벌 모듈이 사용하고 싶다면 위처럼 global로 재정의 해주면 된다.
