[Typescript] 트리플 슬래시 지시어 (Triple-Slash Directives)

타입스크립트 컴파일러에게 컴파일 과정에 해당 모듈을 추가하도록 처리하는 문법입니다.

XML 형태의 지시어를 파일의 상단에 위치시켜야 하며, 삼중 슬래시 지시어 선언 이전에 다른 코드가 있으면 주석으로 인식됩니다.

주로 타입 선언(*.d.ts)을 관리할 때 사용하는 것으로 보입니다.

 

/// <reference ... />

위와 같은 형태로 선언할 수 있으며, ...위치에는 프로퍼티 이름과 값이 들어가는데 그 종류에 따라 다르게 동작합니다.

 

 

 

// test_types.d.ts

/// <reference path="./test.d.ts" />


// test.d.ts

declare let a: number;
declare let b: string;
declare let c: boolean;

트리플 슬래시 지시어는 ts 파일 상단에 위치해야 합니다.

 

 

 

// test_types.d.ts

declare let d: number;
/// <reference path="./test.d.ts" />

트리플 슬래시 지시어 보다 앞에 import 문이나 다른 코드가 존재하면, 타입스트립트 컴파일러에서 해당 지시어를 주석처리합니다.

 

 

 

 

 

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

// next/index.d.ts

/// <reference types="./types/global" />
/// <reference path="./dist/styled-jsx-types/global.d.ts" />
/// <reference path="./amp.d.ts" />
/// <reference path="./app.d.ts" />
/// <reference path="./config.d.ts" />
/// <reference path="./document.d.ts" />
/// <reference path="./dynamic.d.ts" />
/// <reference path="./error.d.ts" />
/// <reference path="./head.d.ts" />
/// <reference path="./image.d.ts" />
/// <reference path="./link.d.ts" />
/// <reference path="./router.d.ts" />
/// <reference path="./script.d.ts" />
/// <reference path="./server.d.ts" />

export { default } from './types'
export * from './types'

path=""에 위치한 파일을 불러와서 컴파일 단계에 추가해줍니다.

 

 

 

 

 

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

/// <reference types="node" />

특정 패키지의 선언 파일을 컴파일 단계에 추가해줍니다.

@types/node/index.d.ts 파일을 컴파일 단계에 추가합니다.

 

 

 

// next/index.d.ts


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

...

 

특정 위치의 선언 파일을 작성해줄 수 있는데, "./types/global.d.ts" 파일을 컴파일 단계에 추가해줍니다.