본문 바로가기
Dev/TypeScript

TypeScript : Triple-Slash Directives

by ZEROGOON 2024. 9. 30.

트리플 슬래시 지시어란?

TypeScript에서 트리플 슬래시 지시어는 ///로 시작하는 특별한 주석으로, 컴파일러에게 추가적인 정보를 제공하는 역할을 합니다. 주로 타입 선언 파일(.d.ts)에서 사용되며, 컴파일 과정에 영향을 미치는 다양한 기능을 수행합니다.

주요 용도

  • 외부 모듈 참조: 다른 파일이나 모듈에 정의된 타입을 현재 파일에서 사용할 수 있도록 연결합니다.
  • 글로벌 변수 선언: 전역적으로 사용되는 변수나 함수의 타입을 선언합니다.
  • 컴파일 옵션 설정: 컴파일 과정에서 사용할 옵션을 지정합니다.

예시

1. 외부 모듈 참조

// myModule.ts
export interface MyInterface {
  name: string;
}

// otherModule.ts
/// <reference path="myModule.ts" />

let myVar: MyInterface = { name: "Alice" };

/// <reference path="myModule.ts" /> 지시어는 otherModule.ts 파일에서 myModule.ts에 정의된 MyInterface 타입을 사용할 수 있도록 연결합니다.

2. 글로벌 변수 선언

// global.d.ts
interface Window {
  myGlobalVar: number;
}

위 예시는 window 객체에 myGlobalVar라는 숫자형 변수가 추가되었음을 선언합니다.

3. 컴파일 옵션 설정

/// <reference no-default-lib="true"/>

위 예시는 컴파일러에게 기본 라이브러리를 포함하지 않도록 지시합니다.

자주 사용되는 트리플 슬래시 지시어

  • <reference path="..." />: 다른 파일을 참조합니다.
  • <reference types="..." />: 타입 선언 파일을 참조합니다.
  • <amd-module>: AMD 모듈을 정의합니다.
  • <module>: CommonJS 모듈을 정의합니다.
  • <reference no-default-lib="true"/>: 기본 라이브러리를 포함하지 않습니다.

주의 사항

  • 파일 상단에 위치: 트리플 슬래시 지시어는 파일의 가장 상단에 위치해야 합니다.
  • XML 형식: XML 형식으로 작성해야 합니다.
  • 컴파일 전에 처리: 컴파일러는 코드를 컴파일하기 전에 트리플 슬래시 지시어를 먼저 처리합니다.

왜 트리플 슬래시 지시어를 사용할까요?

  • 모듈 시스템 지원: 다양한 모듈 시스템을 지원하여 대규모 프로젝트에서 코드를 효율적으로 관리할 수 있습니다.
  • 타입 안전성: 타입 선언 파일을 통해 코드의 타입 안전성을 높일 수 있습니다.
  • 컴파일 옵션 설정: 컴파일 과정을 커스터마이징할 수 있습니다.

결론

트리플 슬래시 지시어는 TypeScript에서 코드의 모듈성과 타입 안전성을 높이는 데 중요한 역할을 합니다. 특히 대규모 프로젝트에서 다양한 파일과 모듈을 관리할 때 유용하게 사용됩니다.

참고: