타입스크립트에서 /// <reference ... /> 의 의미 (Triple-Slash Directives)

타입스크립트를 사용하는 사람이라면, 어느 라이브러리 내부에서 다음과 같은 코드들을 본 적이 있을 것이다.

/// <reference path="..." />

/// <reference types="..." />

/// <reference lib="..." />

이는 삼중 슬래시 지시문이라고 한다.

삼중 슬래시 지시문은 단일 XML 태그를 포함하는 단 한 줄짜리 주석으로, 주석의 내용은 타입스크립트 컴파일러 지시문으로 사용된다.

삼중 슬래시 지시문의 내용은 단일 파일에서만 유효하며, 이는 파일의 최상단에 위치해야 한다. 그렇지 않으면, 일반 주석으로 인식된다.

 

/// <reference path="..." />

• 가장 일반적인 삼중 슬래시 지시문으로, 파일간의 의존성을 나타낸다.
• 컴파일러에 해당 파일을 포함하도록 지시한다.
• 입력 파일 전처리 (Preprocessing input files) 과정으로 추가한 파일이 컴파일에 포함된다.

/// <reference types="..." />

• 이는 패키지 의존성을 설정하는데, import와 유사하다고 할 수 있다.
• 이 지시어는 .d.ts 파일을 포함할 때 사용한다.
• 예를 들면, 노드의 내장 메서드를 사용할 때 컴파일 시 .d.ts를 생성하면 /// <reference types="node" /> 가 .js 파일 최상단에 추가된다.
• 여기서 /// <reference types="node" />는 @types/node/index.d.ts 를 포함하는 것을 의미한다.

/// <reference lib="..." />

• 이는 명시적으로 내장 lib 파일을 포함할 때 사용한다.
• 내장 타입에 의존하는 선언 파일(.d.ts) 작성자에게는 트리플-슬래시-참조 lib 지시어를 사용하는 것이 권장된다.

🫖 내장 타입은 DOM APIs 또는 Symbol이나 Iterable과 같은 내장 JS run-time 생성자를 의미한다.

 

• 예를 들어, 컴파일에서 파일 중 하나에 /// <reference lib="es2017.string" />를 추가한 것은 --lib es2017.string으로 컴파일하는 것과 같다. (즉, 이 파일에서는 es2017의 string 규칙을 따를 수 있다는 의미가 되는 것 같다)

 

https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

Documentation - Triple-Slash Directives