[TypeScript] declare와 ambient module

💻 declare

• 변수, 상수, 함수 또는 클래스가 어딘가에 이미 선언되었음을 알린다.
• JS코드로는 컴파일 되지 않고, TS컴파일러에게 타입 정보를 알리기만 한다.
• 타입의 경우 어차피 JS코드로 컴파일 되지 않으므로 declare를 사용하지 않아도 된다.
• JS로 작성된 외부라이브러리 쓸때 유용하다.
• tsconfig.json에 allowJs옵션을 true로 설정하면 JS파일도 타입지정이 알아서 implicit하게 된다. (리액트에서 유용)

🖤 사용 예시

// JS파일에있는 변수를 ts에 갖다쓸때
// data.js
var a = 10;

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

❗ ts파일끼리는 import export문법을 쓰자

🖤 Ambient Module 앰비언트 모듈

• 전역으로 쓸 수 있는 파일
• ts파일 끼리 변수와 타입을 자유롭게 사용가능

🖤 import export

// data.ts
export {};
type Age = number;
let 나이 :Age = 20;

// index.ts
console.log(나이 + 1) //불가능
let 철수 :Age = 30; //불가능

import 혹은 export 중 하나라도 파일에 들어가 있으면 해당 파일은 로컬 모듈이 되고 거기있는 모든 변수들은 export를 해줘야 다른 파일에서 사용가능하다.

🖤 declare global

• ts파일에 import export문법이 없으면 글로벌 모듈
• ts파일에 import export문법이 있으면 로컬 모듈
• 로컬에서 전역변수를 만들고 싶을때 declare global사용

// 따로 설정없이도 프로젝트 내의 모든 파일에서 이용가능한 타입을 만들고 싶으면 이런식으로 코드를 작성하면 된다. 
declare global {
  type School = string;
} 

일종의 namespace 문법이다. global 이라는 이름의 namespace에 추가된다. global namespace는 모든 파일에서 기본적으로 이용가능.