JS 파일에 선언된 변수 TS 파일에서 사용하기
JS 파일에서 선언된 변수를 TS 파일에서 사용하고 싶을 때에는 declare 키워드를 사용한다.
declare 키워드를 사용하면 TS 파일 내에서 JS 파일에 정의된 변수나 함수의 타입을 명시할 수 있다.
declare let a: number;
위 예시처럼 TS 파일에 declare 를 선언하면 '변수 a 는 number 타입이며,
이미 어딘가에 정의되어 있다' 라고 TS 컴파일러에게 알리는 것이다.
declare global
'declare global' 은 TS 모듈 내에서 전역 변수나 타입을 선언할 때 사용된다.
일반적으로 TS 파일은 자체 scope 를 가지고 있어, 파일 내에서 선언된 변수나 타입은 그 파일 내에서만 접근이 가능하다.
하지만 때로는 특정 타입이나 변수를 전역적으로 사용하고 싶을 수 있다
이런 경우 declare global 을 활용할 수 있다.
// globalTypes.ts 파일
export {}; // 이 파일을 모듈로 만들기 위해 export 구문 추가
declare global {
type Dog = {
name: string;
age: number;
};
}
예를 들어 여러 파일에서 공통으로 사용할 Dog 라는 타입을 선언하고 싶다고 가정해보자.
이 타입을 전역적으로 사용 가능하게 만들기 위해서 declare global 을 사용할 수 있다.
위 코드에서 export {} 는 TS에게 이 파일이 '모듈'임을 알린다.
이로 인해 파일 내에서 선언된 내용이 기본적으로 로컬 scope 에만 적용이 된다.
그러나 declare global 구문을 사용함으로써 Dog 타입을 전역 타입으로 선언할 수 있다.
이렇게 하면 프로젝트의 다른 모든 파일에서 Dog 타입을 추가 import 없이 사용할 수 있다.
주의할 점
declare global 을 사용할 때에는 해당 선언을 모듈 내에 넣기 위해
파일 최상단에 export 구문을 추가해야한다
Ambient Module
TS 는 import / export 없이도 다른 파일에서 정의된 타입을 사용할 수 있게하는 Ambient Module 이라는 기능이 있다.
기본적으로 같은 프로젝트 내의 모든 TS 파일이 전역 namespace 에서 변수와 타입을 공유할 수 있게 해주는 것이다.
하지만 파일에 하나라도 export / import 가 존재하면, 해당 파일은 '로컬 모듈'로 취급되어서
파일 내 선언된 모든 것들이 해당 모듈에 국한되며, 다른 파일에서 사용되기 위해서는 export 해야한다.
Javascript 와의 호환
tsconfig.json 에서 allowJS 옵션을 true 로 설정하면
TS 컴파일러가 JS 파일을 포함하여 컴파일 할 수 있다.
이는 TS 프로젝트에서 JS 코드를 사용할 때 유용하며, TS 컴파일러가 JS 파일에 대해 암시적 타입을 추론하도록 한다.
ref: 코딩애플, Typescript 공식문서
